CSS实现水平垂直居中的四种方法

最新推荐文章于 2024-06-02 17:14:20 发布

小橘子y

最新推荐文章于 2024-06-02 17:14:20 发布

阅读量133

点赞数 2

分类专栏：前端初学总结文章标签： css html5

本文链接：https://blog.csdn.net/ybxdcsdn/article/details/120241973

版权

前端初学总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS实现水平垂直居中的四种方法

以下body部分代码都是：

<div id="box">
    <div id="child">

    </div>
 </div>

所示css代码如下：

1. 定位（父相子绝）

利用margin

		#box{
            width: 300px;
            height: 300px;
            background-color: crimson;
            position: relative;
        }
       #child{
            width: 100px;
            height: 100px;
            background-color: darkcyan;
            position: absolute;
            top: 50%;
            left: 50%;
            /*margin的值分别是上、右、下、左*/
            margin: -50px 0  0 -50px; 
            /*也可以像下面这样写*/
            /* margin-top: -50px;
            margin-left: -50px; */
        }

可以translate（x,y）平移

		#box{
            width: 300px;
            height: 300px;
            background-color: crimson;
            position: relative;
        }
       #child{
            width: 100px;
            height: 100px;
            background-color: darkcyan;
            position: absolute;
            top: 50%;
            left: 50%;
            /*translate属性为平移，参数分别是x轴和y轴*/
             transform: translate(-50%,-50%); 
        }

margin: auto;

		#box{
            width: 300px;
            height: 300px;
            background-color: crimson;
            position: relative;
        }
       #child{
            width: 100px;
            height: 100px;
            background-color: darkcyan;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0; 
        }

2.flex 布局
父元素决定子元素的位置

		#box{
            width: 300px;
            height: 300px;
            background-color: rgb(20, 220, 87);
            /*flex 布局*/
            display: flex;
            /*子元素水平居中*/
            justify-content: center;
            /*子元素垂直居中*/
            align-items: center;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: seashell;
        }

3.grid网格布局

		#box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /*grid布局*/
            display: grid;
            /* 超级居中 */
            place-items: center;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: pink;
        }

4.display:table-cell

		#box{
            width: 300px;
            height: 300px;
            background-color: yellow;
            /*表格布局*/
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: green;
            display: inline-block;
        }