小白也能看懂的前端知识之四：最实用的元素居中教程

一、块元素中的文字、行内元素、inline-block元素：

1. 左右居中： text-align: center; 或者给子元素加 margin: 0 auto;

2. 上下居中： line-height: 100px; （这里的line-height等于该块元素的height）

<div style="width:100px; height:100px; text-align:center; line-height:100px;"> 123 </div>

二、块元素中的块元素：

1. 计算子元素的块margin-top为（父高度 - 子高度）/2    margin：25px auto;

<div class="parent" style="width: 100px; height: 100px; border: 1px solid #ccc;"> <div class="children" style="width: 50px; height: 50px; border: 1px solid #ccc; margin: 25px auto;"> </div> </div>

2. 父元素相对定位，子元素绝对定位

​ .parent { position: relative; width: 100px; height: 100px; border: 1px solid #ccc; } .children { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 50px; height: 50px; border: 1px solid #ccc; } ​

2. 或者: 父元素样式不变，子元素样式改为

.children { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 50px; height: 50px; border: 1px solid #ccc; }

3. flex布局：

.parent { display: flex; width: 100px; height: 100px; align-items: center; justify-content: center; border: 1px solid #ccc; } .children { width: 50px; height: 50px; border: 1px solid #ccc; }