下面来讲解“CSS实现DIV居中的三种方法”的完整攻略。
1. 水平居中
方法一:使用text-align
让父元素的text-align
属性设置为center
,子元素则设置display:inline-block
即可实现水平居中。
示例代码如下:
<style>
.parent{
text-align:center;
}
.child{
display:inline-block;
}
</style>
<div class="parent">
<div class="child">我是要居中的元素</div>
</div>
方法二:使用flex布局
使用flex
布局可以更简单地实现水平居中,只需要将父元素的display: flex
和justify-content: center
即可。
示例代码如下:
<style>
.parent {
display: flex;
justify-content: center;
}
.child {
/* 其他样式 */
}
</style>
<div class="parent">
<div class="child">我是要居中的元素</div>
</div>
2. 垂直居中
方法一:使用table布局
使用table
布局可以实现垂直居中,让父元素和子元素都设置为display:table
,并且让子元素设置为display:table-cell
和vertical-align:middle
即可。
示例代码如下:
<style>
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
</style>
<div class="parent">
<div class="child">我是要居中的元素</div>
</div>
方法二:使用flex布局
使用flex
布局可以更简单地实现垂直居中,只需要将父元素的display: flex
和align-items: center
,子元素的margin: auto
即可。
示例代码如下:
<style>
.parent {
display: flex;
align-items: center;
}
.child {
margin: auto;
}
</style>
<div class="parent">
<div class="child">我是要居中的元素</div>
</div>
3. 水平垂直居中
方法一:使用absolute定位
使用绝对定位实现元素水平垂直居中,先让子元素的position:absolute
,并且设置top:50%
和left:50%
。然后让子元素以自身宽度的一半和高度的一半为偏移量分别设置margin-left:-自身宽度/2px
和margin-top:-自身高度/2px
。
示例代码如下:
<style>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
</style>
<div class="parent">
<div class="child">我是要居中的元素</div>
</div>
方法二:使用flex布局
使用flex
布局可以更简单地实现水平垂直居中,只需要将父元素的display: flex
和align-items: center;
和justify-content: center;
,子元素的width
和height
就可以。
示例代码如下:
<style>
.parent {
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 100px;
height: 100px;
}
</style>
<div class="parent">
<div class="child">我是要居中的元素</div>
</div>
以上就是三种常见的CSS实现DIV居中的方法啦,希望对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS实现DIV居中的三种方法 - Python技术站