CSS实现DIV居中的三种方法

下面来讲解“CSS实现DIV居中的三种方法”的完整攻略。

下面来讲解“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居中的方法啦，希望对你有所帮助。