大家好,欢迎来到IT知识分享网。
本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。
水平居中
- 行内元素
这种情况最简单,只需要将行内元素包括在一个display属性为block的父元素中,并且设置父元素text-align为居中即可
.border {
width: 400px;
line-height: 100px;
border: 1px solid red;
text-align: center;
}
<div class="border">
<span>行内元素</span>
</div>
- 块状元素
对块状元素设置相应的外边距即可,外边距左、右设置为auto。
.parent {
width: 400px;
height: 100px;
border: 1px solid red;
}
.block-child {
width: 100px;
border: 2px solid black;
margin: 10px auto;
text-align: center;
}
<div class="parent">
<div class="block-child">块状元素</div>
</div>
- 多个块状元素①
传统方法,在父元素设置text-align:center; 然后将需要居中的块状元素的display设置为inline-block
.border {
width: 400px;
line-height: 100px;
border: 1px solid red;
text-align: center;
}
.inline-block {
display: inline-block;
border: 1px solid black;
}
<div class="border">
<div class="inline-block">块状元素1</div>
<div class="inline-block">块状元素2</div>
<div class="inline-block">块状元素3</div>
</div>
- 多个块状元素②
使用flex布局实现,将父元素display设置为flex,同时设置子元素对齐。
.parent-flex {
width: 400px;
border: 1px solid red;
display: flex;
justify-content: center;
}
<div class="parent-flex">
<div style="border: 1px solid black;">块状元素1</div>
<div style="border: 1px solid black;">块状元素2</div>
<div style="border: 1px solid black;">块状元素3</div>
</div>
垂直居中
- 单行行内元素
将行内元素的 line-height 属性与其父元素的 height 属性设置为相同值,比如都是40px。
- 多行的行内元素
通过设置父元素display属性为table-cell,及其他相关属性解决。
.parent-table-cell {
width: 400px;
height: 100px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
<div class="parent-table-cell">
<span>行内元素1</span><br>
<span>行内元素2</span><br>
<span>行内元素3</span>
</div>
- 已知高度的块状元素
结合元素的position及margin属性,通过定位设置居中,父元素position设置为relative。
.item{
top: 50%; // 顶部位置位于父元素的50%处
margin-top: -50px; // margin-top 值为自身高度的一半
position: absolute; //position也可以是
}
注意:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持display属性值 “inline-table”、”run-in”、”table”、”table-caption”、”table-cell”、”table-column”、”table-column-group”、”table-row”、”table-row-group”、以及 “inherit”。
喜欢就关注支持一下吧。[呲牙][呲牙]
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/46283.html