垂直居中 | 易学教程

DIV水平居中和垂直居中布局

阅读更多关于 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

H5与CSS3常用设置

阅读更多关于 H5与CSS3常用设置

1.设置div铺满全屏对于一个div1，要使其属性height：100%生效，需要使其所有父元素，有确定的属性height。要铺满全屏，就是从html开始，所有的height为100%。 2.垂直居中设置以下三个属性，为子元素在其父元素中垂直居中。 position: relative; top: 50%; transform: translateY(-50%); 来源： https://www.cnblogs.com/catMann/p/11355214.html

元素垂直水平居中的多种方案

阅读更多关于元素垂直水平居中的多种方案

html<div class="parent"> <div class="child"></div> </div> 宽高固定的元素如何进行垂直水平居中 1.使用绝对定位与负边距实现　　 .parent { position: relative; width: 400px; height: 400px; margin: auto; border: 1px solid yellow; } .child { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; width: 200px; height: 200px; border: 1px solid green; } 　　这个的实现方法原理: 相对父元素定位，距上边和左边框一半，然后margin在减去子元素的一半。 2.绝对定位与margin:auto实现水平垂直居中 .parent { position: relative; width: 400px; height: 400px; margin: auto; border: 1px solid yellow; } .child { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 200px;

div居中对齐

阅读更多关于 div居中对齐

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； } 垂直居中

水平垂直居中

阅读更多关于水平垂直居中

1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title></title> 8 <style> 9 .big { 10 width: 400px; 11 height: 300px; 12 background: navy; 13 margin: 0 auto; 14 position: relative; 15 } 16 17 .small { 18 width: 100px; 19 height: 100px; 20 background: violet; 21 position: absolute; 22 top: 50%; 23 left: 50%; 24 margin-top: -50px; 25 margin-left: -50px; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div class="big"> 32 <div class="small"></div> 33 </div> 34 <