1. 首页
  2. IT资讯

一个div在另一个div内水平垂直两方向居中的方法总结

“u003Cdivu003Eu003Cpu003E小编在做练习时遇到了一个问题:如何使一个div在另一个div里面水平和垂直两个方向全部居中。之前一般的情况都是一个div在另一个div里面水平居中,直接使用margin:0 auto;即可解决。这次的情况第一次遇到,网上找了一些方法,亲测有效,总结如下,将其放入一个页面内了。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F11920005c8d6d2803c41″ img_width=”800″ img_height=”666″ alt=”一个div在另一个div内水平垂直两方向居中的方法总结” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003EHTML部分:u003Cu002Fpu003Eu003Cpu003E<!DOCTYPE html>u003Cu002Fpu003Eu003Cpu003E<html>u003Cu002Fpu003Eu003Cpu003E<head>u003Cu002Fpu003Eu003Cpu003E<meta charset=”UTF-8″>u003Cu002Fpu003Eu003Cpu003E<title><u002Ftitle>u003Cu002Fpu003Eu003Cpu003E<u002Fhead>u003Cu002Fpu003Eu003Cpu003E<body>u003Cu002Fpu003Eu003Cpu003E<div class=”parent1″>u003Cu002Fpu003Eu003Cpu003E<div class=”child1″>方法一<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”parent2″>u003Cu002Fpu003Eu003Cpu003E<div class=”child2″>方法二<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”parent3″>u003Cu002Fpu003Eu003Cpu003E<div class=”child3″>方法三<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”parent4″>u003Cu002Fpu003Eu003Cpu003E<div class=”child4″>方法四<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fbody>u003Cu002Fpu003Eu003Cpu003E<u002Fhtml>u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F1193000694cb588c8b1f” img_width=”256″ img_height=”256″ alt=”一个div在另一个div内水平垂直两方向居中的方法总结” inline=”0″u003ECSS部分:u003Cu002Fpu003Eu003Cpu003E<style>u003Cu002Fpu003Eu003Cpu003E*{margin: 0;padding: 0;}u003Cu002Fpu003Eu003Cpu003Eu002F*方法一*u002Fu003Cu002Fpu003Eu003Cpu003E.parent1{u003Cu002Fpu003Eu003Cpu003Ewidth: 500px;height: 200px;u003Cu002Fpu003Eu003Cpu003Eborder: 4px solid #FF4500;u003Cu002Fpu003Eu003Cpu003Eposition: relative;u003Cu002Fpu003Eu003Cpu003Emargin-top: 20px;margin-bottom: 20px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.child1{u003Cu002Fpu003Eu003Cpu003Ewidth: 200px;height: 150px;u003Cu002Fpu003Eu003Cpu003Emargin: auto;position: absolute;u003Cu002Fpu003Eu003Cpu003Etop: 0;right: 0;bottom: 0;left: 0;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #008B8B;u003Cu002Fpu003Eu003Cpu003Eline-height: 150px;u003Cu002Fpu003Eu003Cpu003Etext-align: center;u003Cu002Fpu003Eu003Cpu003Ecolor: white;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002F*方法二*u002Fu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003E .parent2{u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Ewidth: 500px;height: 200px;u003Cu002Fpu003Eu003Cpu003Eborder: 4px solid #008B8B;u003Cu002Fpu003Eu003Cpu003Edisplay: table-cell;u003Cu002Fpu003Eu003Cpu003Evertical-align: middle;u003Cu002Fpu003Eu003Cpu003Etext-align: center;}u003Cu002Fpu003Eu003Cpu003E.child2{u003Cu002Fpu003Eu003Cpu003Ewidth: 200px;height: 150px;u003Cu002Fpu003Eu003Cpu003Edisplay: inline-block;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #008B8B;u003Cu002Fpu003Eu003Cpu003Eline-height: 150px;color: white;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002F*方法三*u002F u003Cu002Fpu003Eu003Cpu003Eu003Cspanu003E.parent3{u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Ewidth: 500px;height: 200px;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Eborder: 4px solid #008B8B;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Emargin-top: 20px;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Edisplay: flex;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Ejustify-content: center;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Ealign-items: center;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003E}u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003E.child3{u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Ewidth: 200px;height: 150px;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Ebackground-color: #008B8B;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Eline-height: 150px;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Etext-align: center;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Ecolor: white;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003E}u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu002F*方法四 *u002Fu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003E.parent4{u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Ewidth: 500px;height: 200px;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Eborder: 4px solid #FF4500;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Eu003Cspanu003Eposition: relative;u003Cu002Fspanu003Eu003Cu002Fpu003Eu003Cpu003Emargin-top: 20px;u003Cu002Fpu003Eu003Cpu003E} u003Cu002Fpu003Eu003Cpu003E.child4{u003Cu002Fpu003Eu003Cpu003Ewidth: 200px;height: 150px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #008B8B;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Etop: 50%;left: 50%;u003Cu002Fpu003Eu003Cpu003Emargin-left: -100px;u003Cu002Fpu003Eu003Cpu003Emargin-top: -75px;u003Cu002Fpu003Eu003Cpu003Eline-height: 150px;u003Cu002Fpu003Eu003Cpu003Etext-align: center;u003Cu002Fpu003Eu003Cpu003Ecolor: white;u003Cu002Fpu003Eu003Cpu003E} u003Cu002Fpu003Eu003Cpu003E<u002Fstyle>u003Cu002Fpu003Eu003Cpu003E最后效果图如下:u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F11920005cd9c41e73a0d” img_width=”1349″ img_height=”912″ alt=”一个div在另一个div内水平垂直两方向居中的方法总结” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E以上就是几种简单的居中方法,本文纯属练习,如有错误欢迎各位指出。u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:一个div在另一个div内水平垂直两方向居中的方法总结

主题测试文章,只做测试使用。发布者:熱鬧獨處,转转请注明出处:http://www.cxybcw.com/10856.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code