CSS实现水平居中，垂直居中，垂直水平居中

最新推荐文章于 2023-09-30 13:11:25 发布

Jimmy-?????

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量253

点赞数 1

文章标签： CS

本文链接：https://blog.csdn.net/qq_41169214/article/details/79984551

版权

水平居中的几种方法：

以下这几种是我在学习中会使用到的方法：

一、“margin: 0 auto ; text-algin:center;”实现水平居中的方法。

二、通过“display:table-cell”/“position:absolite;”和“margin-left：”实现水平居中。<这个方法比较麻烦，所以不建议使用，>

前提是在父元素和子元素的高度和宽度都设置的情况下，才可以使用此方法；

display:table-cell;要使用在父元素中，margin-left:要使用在子元素中；

注意：父元素display:table-cell，子元素给剩余宽度一半的margin-left；

注释：“position:absolite;”此方法和以上使用的情景相同.

三、通过隐藏节点，然后使用float:left;来实现水平居中的方法；这种方法也适用垂直居中，但垂直居中并不使用float:<这个方法一般不会怎末使用>

例子：

#div{

width:100px;

height:100px;

float:left;

} //这个节点是隐藏状态的，其实在文本中并未使用。

#div1{

width:200px;

height:100px;

float:left;

} </style>

CSS 垂直居中方法：

一、这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align ；property 属性。<IE8不兼容，而且需要嵌套标签，所以自我感觉不怎末好>

例如：

<div id="div"> <div id="div1">HELLO WORLD</div> </div>

 #div{  display:table; }
#div1{   display:table-cell;   vertical-align:middle;  }

二、在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。 content 清除浮动，并显示在中间。<感觉这种方法比较好，浏览器兼容性也比较好>

实例：

<div id="div">
  <div id="content">Conttent here</div>
</div>

#div {
   flost:left;
  height:50%;
  margin-bottom:-120px;}
#content{
    clear:both;
    height:240px;
    position:relative;
}

垂直水平居中：

一、在css样式中设置：position：fixed;//位置相对于窗口是固定的。

具体看实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直水平居中的效果</title>
<style type="text/css">
  .class{
      position:fixed;
      left: 50%;
      top: 50%;
      margin-top:width/2;
      margin-left:height/2;
  }
    </style>
</head>
<body>
<div class="class">垂直水平居中的效果</div>
</body>
</html>

二、margin:auto;方法

具体看实例：

<style type="text/css">
.div{
    width: 200px;
    height:200px;
    border: 1px solid  red;
    position: relative;
}
    .div1{
        width: 50px;
        height: 50px;
        background-color: darkred;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    </style>
</head>
<body>
<div class="div">
    <div class="div1">
    </div>
</div>

结果：

三、margin负值方法

具体看实例：

<style type="text/css">
 .wrp2{position: relative;
 }
    .box2{
        position:absolute;
        top:50%;
        left:50%;
        margin-left: -100px;
        margin-top: -75px;
    }
    </style>
</head>
<body>
 <div class="box box2">
     <h3>完全居中方案二</h3>
     <h3>开发工具</h3>
 </div>

结果：

四、flex弹性盒子方法

在父元素中设置宽，高，边框，display:flex; display:-webkit-flex;

-webkit-align-items:center; align-items:center;

-webkit-justify-content:center;justify-content:center;

align-items:控制水平方向上的居中，justify-content:center;控制垂直方向上的居中；

在子元素中只要设置content样式就好了。此处就不在演示了。

五、table-cell方法；

.div{
    width: 200px;
    height:200px;
    border: 1px solid  red;
    position: relative;
    display:table-cell ;
    vertical-align:middle;
    text-align: center;
}
    .div1{
        background-color: darkred;
   vertical-align:middle;
    }
    </style>
</head>
<body>
<div class="div">
    <div class="div1">
    </div>
</div>