元素水平居中，垂直居中方法

最新推荐文章于 2024-04-24 11:33:59 发布

阳光下的冷静

最新推荐文章于 2024-04-24 11:33:59 发布

阅读量351

点赞数 1

分类专栏： css 文章标签：元素居中水平居中垂直居中浮动元素居中绝对定位元素水平垂直居中

本文链接：https://blog.csdn.net/m0_37686205/article/details/84498183

版权

css 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

水平居中

情景1：父元素和子元素都是块级元素，比如两个都是div，要求子元素处于水平居中

设置：都只需要在子元素的样式中添加代码：

方法<1>

margin: 0 auto;

方法<2>

   position: relative;
   margin: auto;
   left: 0;
   right: 0;

情景2：父元素是块级元素，子元素是行内元素，比如一个是div，一个是button，要求button是水平居中

设置：在父级元素的样式中添加代码：

text-align: center;

情景3：父元素和子元素都是行内元素，比如父是span，子是a，要求a是水平居中

设置：由于行内元素是不能设置高和宽的，所以首先得把父元素转换成块级元素，然后才能设置高宽，这就变成了情景2了，

所以设置跟情景2的一样，代码如下：


display: block;
height: 100px;
width: 100px;
text-align: center;
background: green;

垂直居中

情景1：父元素是块级元素，子元素是行内元素，比如一个是div，一个是button，要求button是垂直居中

设置：在父级元素样式中设置line-heifht的高度，值与父元素设置的高度一样，代码如下：

width: 200px;
height: 200px;
background: purple;	
line-height: 200px;

情景2:父元素和子元素都是块级元素，比如两个都是div，要求子元素处于垂直居中

设置：给父级元素设置display和vertical-align，设置的具体值如下代码(该种方法对情景1也有效)：

display: table-cell;
vertical-align: middle;

如果想要某个元素同时满足水平居中和垂直居中可以混合使用以上的方法或者其他的计算方法。

浮动元素水平居中

对于一个没有浮动的元素，我们通常可以通过对其设置 margin:0 auto; 来实现元素的居中，但是这个方法对于浮动元素却失去了作用，其实我们可以理解的是，在脱离文档流后，浮动的力量其实就是auto的力量，所以他它会自动向左浮动。

所以对于一个浮动元素居中做法：

首先给此元素设置一个宽度值，先设置它的 margin-left:50% ，这个时候元素的左边缘正好位于其父元素的中央，然后设置其position:relative; left:负本元素宽度的一半，这样的目的是将本元素向左移动其宽度的一半，这个时候可保证本元素的中间点位于父元素的中央。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
　　<meta charset="utf-8" />
　　<title>元素居中问题</title>
<style type="text/css">
#main{
　　width: 70%;
　　background-color: #666;
　　overflow: hidden;
}
#div1{
　　width:30%;
　　height: 200px;
　　float: left;
　　background-color: blue;
　　margin-left:50%; 
　　position:relative; 
   left:-15%;
}
</style>
</head>
<body>
<div id="main">
　　<div id="div1">
　　　　<p>居中吧！div！</p>
　　</div>
</div>
</body>
</html>

浮动元素垂直居中

核心代码: vertical-align: middle;display: table-cell;

代码如下：

<style type="text/css">
    #demo {
        width: 300px;
        height: 200px;
        background-color: grey;

        display: table-cell;
        vertical-align: middle;
    }
        .fl {

            float: left;
            width: 50px;
            height: 50px;
            background-color: black;

        }
    </style>



<body>
    <div id="demo">
        <div class="fl"></div>
    </div>
</body>