div水平垂直居中

最新推荐文章于 2023-05-25 14:38:05 发布

w_t_y_y

最新推荐文章于 2023-05-25 14:38:05 发布

阅读量371

点赞数

分类专栏： HTML+css

本文链接：https://blog.csdn.net/w_t_y_y/article/details/108581345

版权

HTML+css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、水平居中：

1、div盒子水平居中：比较容易，直接设置div元素的margin: 0 auto就可以实现。

2、div里面的内容水平居中：text-align:center

二、垂直居中：

1、div盒子垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居于页面正中间</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            background-color: #EAEAEA;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: #1E90FF;
        }
        .center-in-center{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="center-in-center"></div>
</body>
</html>

2、div内容垂直居中：

三、水平垂直居中：div盒子和内容均水平垂直居中

.parent{
width:200px;height:300px;
background:#ddd;
}
.child{
background:#666;
color:#fff;
}

1、方法一：设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中：

.parent {
position:relative;
}
.child {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

2、方法二：定位+位移：使用子绝父相的定位方式,无须知道盒子自身的高度，使用范围较广：

.parent{
position: relative;
}
.child{
position: absolute;
left: 50%; /* 父盒子宽度的50% */
top: 50%; /* 父盒子高度的50% */
transform: translate(-50%,-50%); /* 子盒子自身宽高的50% */
}

3、方法三：table-cell+inline-block：

将父盒子设置为table-cell(能够使元素呈单元格的样式显示)，并设置text-align: center(使内容水平居中)；vertical-align: middle(使内容垂直居中);。子盒子设置为inline-block可以使其内容变为文本格式，也可设置宽高：

.parent{
display: table-cell; /*使标签元素以表格单元格的形式呈现*/
text-align: center; /* 水平居中*/
vertical-align: middle; /* 垂直居中 */
}
.child{
display: inline-block; /* 将子盒子设置为行内块级（文本格式）*/
}

4、方法四：弹性盒子：

使用弹性盒子的时候需要给父级设置display:flex;在父元素上设置水平与垂直方向上的排列方式即可；
该方法不需要设置子元素：

.parent{
display: flex;
justify-content: center; /* 水平方向居中*/
align-items: center; /* 垂直方向居中*/
}

以上几种方式推荐使用弹性盒子，因为在使用定位的时候会使元素脱离文档流出现撑不起父盒子的问题，而在弹性盒子中不会出现这样的问题，而且利用弹性盒子还能解决其他的问题。

w_t_y_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
div水平垂直居中

一、水平居中二、垂直居中三、水平垂直居中：<div class="parent"> <div class="child">DEMO</div> </div>.parent{ width:200px;height:300px; background:#ddd; }.child{ background:#666; color:#fff; }1、方法一：设置margin自动适应,然后设置定位的上下...
复制链接

扫一扫