【HTML元素居中】元素水平垂直居中的常用方法
HTML元素居中
- 元素居中
- 常用水平垂直居中
- 行内元素居中
- 块级元素居中
- margin
元素居中
常用水平垂直居中
行元素、块元素都可以使用。
flex + center
.parent {display: flex;align-items: center;justify-content: center;}.child {width: 100px;height: 100px;border: 1px solid red;}
<div class="parent"><div class="child"></div></div>
parent有多个child时, 会以所有child的宽高之和来居中显示到parent元素上
flex + margin
.parent {display: flex;}.child {border: 1px solid red;}
<div class="parent"><div class="child"></div></div>
parent有多个child时, 子元素会平均分配父节点的宽高
position: absolute; transform
父元素高度必须设置，或者父元素高度由其他子元素撑开. 不然会出现父元素高度塌陷
.parent {height: 300px;position: relative;border:1px solid red;
}.child {width: 35px;height: 35px;border-radius: 50%;border: 1px solid red;position: absolute;left: 50%;top: 50%;transform: translate(-50%);
}
<div class="parent"><div class="child"></div>
</div>
parent有多个child时, 设置定位absolute的元素会居中显示，其他元素从父元素开始的位置按照从上到下、从左到右的顺序依次排列
gridplace-item: center
.parent {height: 300px;display: grid;place-items: center;border: 1px solid red;}.child {width: 35px;height: 35px;border-radius: 50%;border: 1px solid red;}
<div class="parent"><div class="child"></div></div>
parent有多个child时, 子元素水平居中，垂直方向上会平均分配父节点的高度
行内元素居中
-
水平居中
给父元素添加
text-align: center, 且子元素可继承text-align属性 -
垂直居中
给父元素添加
display: table-cell; vertical-align: middle;文本垂直居中：
给居中元素添加height: 30px;line-height: 30px -
水平垂直居中
table-cell + vertical-align + text-align.parent {width: 300px;height: 300px;border: 1px solid red;display: table-cell;vertical-align: middle;text-align: center;}.child {display: inline-block;width: 35px;height: 35px;border-radius: 50%;border: 1px solid red;}<div class="parent"><span class="child"></span> </div>
块级元素居中
-
水平居中
-
margin: 0 auto -
margin-left: calc(50% - width/2px)
子元素width需固定
.parent {height: 300px;border: 1px solid red; } /* margin + auto */ .child-1 {width: 35px;height: 35px;border-radius: 50%;border: 1px solid red;margin: 10px auto; } /* margin-left + calc */ .child-2 {width: 420px;height: 35px;margin-left: calc(50% - 210px);border: 1px solid red; }<div class="parent"><div class="child-1"></div><div class="child-2"></div> </div> -
-
水平垂直居中
position: absolute; left; top; bottom; right; margin: auto
子元素宽高固定。.parent {height: 300px;border: 1px solid red;position: relative; }.child {width: 35px;height: 35px;border-radius: 50%;border: 1px solid red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; }<div class="parent"><div class="child"></div> </div>
margin
当元素脱离默认文档流时（浮动，绝对定位，固定定位）,margin失效
给inline-block和inline设置margin:0 auto 时是没用的