手把手教你CSS水平、垂直居中的10种方式(小结)使用CSS实现盒子水平垂直居中的方法(8种)CSS 水平居中并限定最大的宽度实现CSS实现子元素div水平垂直居中的示例CSS中的translate(-50%,-50%)实现水平垂直居中效果css3 flex实现div内容水平垂直居中的几种方法CSS3 不定高宽垂直水平居中的几种方式CSS3实现水平居中、垂直居中、水平垂直居中的实例代码web前端之css水平居中代码解析

 .parent{ width:300px; margin:0 auto; }

 .child{ text-align：center line-height:100px //知道子元素的高,设置和高一样的高度 }

 .parent{ line-height: 300px; //知道父元素的高,设置和高一样的高度 } .child1{ display: inline-block; vertical-align: middle; line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。 } .child2{ display: inline-block; vertical-align: middle; line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。 }

 .parent{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

 .parent{ position: relative } .child{ position: absolute; top:50%; left:50%; transform:translate(-50%,-50%) } // 备注一下，如果只需要上下居中那就只要保留top,只要左右居中的话就保留left，translate设置 translateY(-50%)或者translateX(-50%)

 .parent{ display:flex; align-items:center; justify-content:center; } .child{ }

 .parent{ line-height: 300px; //设置和父元素的高度一样 text-align: center; } .child{ display: inline-block; vertical-align: middle; line-height: initial; //initial 关键字用于设置 CSS 属性为它的默认值。 text-align: left; //将文字显示重置为想要的效果 }

 .parent{ display: table-cell; vertical-align: middle; text-align: center; } .child{ display: inline-block; }

 .parent{ position: relative } .child{ position: absolute; top: 50%; left: 50%; margin-left: -50px; //知道子元素的宽高 margin-top: -50px; //知道子元素的宽高 }

 .parent{ position: relative } .child{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

 .parent{ position: relative } .child{ position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); }

 //公共的样式在最上面 
123

 .parent{ writing-mode: vertical-lr; //改变文字显示的方向 text-align: center; } .box-child{ writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%; } .child{ text-align: left; //将文字显示重置为想要的效果 margin: 0 auto; } 

 .parent{ display: grid; } .child{ align-self: center; justify-self: center; }

123

 .parent{ text-align: center; } .child{ display: inline-block; }