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

水平居中的几种方法:

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

一、“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:<这个方法一般不会怎末使用>

例子:

<style type="text/css">

 #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>




相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页