div居中

一、水平居中 1. inline-block + text-align text-align（他会有继承） 作用在块级元素上，会 让块级元 素的inline-block子级 ，进行排列 <div class="parent"> <div class="child">demo</div> </div> 　　. parent{ width: 200px; text-align: center; } .child{ display: inline-block; } 2. table + margin table如果不给它的所在元素设置宽的话，他的宽会是由内容撑开 <div class="parent"> <div class="child">demo</div> </div> 　　 .child{ 　　 display: table; 　　 margin: 0 auto; 　　} 3.absolute + transform <div class="parent"> <div class="child">demo</div> </div> .parent{ position: relative; } .child{ position: absolute; left:50%; transform: translateX(-50%); } 4.flex + justify content

<div style="text-align:center"> <div style="margin:0 auto;"> 一：外层Div 设置水平居中对齐；【text-align:center】 二：内层Div 设置上下边距0，左右边距自动计算；【margin:0 auto;】 </div> </div> 来源： https://www.cnblogs.com/Rawls/p/11365946.html

1.div 自己水平居中 margin： 0 auto； 2.子代 水平居中：父元素：text-align:center，子元素：inline/inline-block； 3. 定位，子代水平垂直居中（方法少用；会出现兼容性问题，或者无法自适应响应式布局） <div class='father'> <div class='child'></div> </div> .father{ 　　width: 500px; 　　height:500px; 　　background-color: aqua; 　　margin: 0 auto; 　　position: relative; } .child{ 　　position:absolute; 　　width: 300px; 　　height:300px; 　　background-color: brown; 　　margin: 0 auto; 　　top:50%; 　　left: 50%; 　　margin-left: -150px; 　　margin-top:-150px; 　　} 默认情况下html和body的高度是由内容撑起来的高度 body.html{ 　　width：100%； 　　height：100%； 　　margin：0； 　　padding：0； } 垂直居中