zoukankan html css js c++ java

css垂直居中

行内元素垂直居中可以用vertical-align:middle; 水平居中text-align:center

https://www.zhihu.com/question/20543196

1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行：支持ie的

#parent{
        position:relative;
    }

 #child{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

 }

父级元素以及子元素高度宽度未知如何实现水平垂直居中？

这个方案在父级元素们没有设置position为relative的时候，相对于html是水平垂直居中的，但是如果父级元素指定position为relative，并且高度不定的时候，无法实现垂直居中。

.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}

css vertical-align:middle (块级元素支持)或者用table <td vertical="middle">

可以用<center> </center>来实现

另外还有个办法
position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
对于ie6,只能把position:改成absolute;

2.若父容器下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

#parent{
        height:46px;
    }

    #child{
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

3.Flex 布局给父容器设置如下属性：旧浏览器不支持：

#parent{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

4.使用给当前元素（浏览器都能够兼容，不足之处就是需要固定宽高） position:absolute,设置left、top、margin-left、margin-top的属性

#child{            
　　 position:absolute;            
    width:200px;            
    height:200px;            
    top:50%;            
    left:50%;            
    margin-top:-100px;            
    margin-left:-100px;            
    background:red; 
}

5.利用position:absolute属性，设置top/bottom/right/left

#child{            
    position:absolute;            
    width:140px;            
    height:140px;            
    top:0;            
    right:0;            
    bottom:0;            
    left:0;            
    margin:auto;            
    background:black;
}

6.使用position:fixed,同样设置left、top、margin-left、margin-top的属性（IE是不支持这个position:fixed属性的）

.child{              
    position:fixed;              
    width:180px;              
    height:180px;              
    top:50%;              
    left:50%;              
    margin-top:-90px;              
    margin-left:-90px;              
    background:orange;
}

7.利用position:fixed属性，margin:auto这个必须（和第五个差不多）

.three{             
    position:fixed;             
    width:160px;             
    height:160px;             
    top:0;             
    right:0;             
    bottom:0;             
    left:0;             
    margin:auto;             
    background:pink;
}

8.利用display:table-cell属性使内容垂直居中

#child{             
    display:table-cell;             
    vertical-align:middle;             
    text-align:center;             
    width:120px;             
    height:120px;             
    background:purple;
}

9.最简单的一种使行内元素居中的方法，使用line-height属性，比如使文字垂直居中对齐

.demo{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    background:gray;
}

10.使用css3的display:-webkit-box属性，再设置-webkit-box-pack:center / -webkit-box-align:center

.demo{             
    width:90px;             
    height:90px;             
    display:-webkit-box;            
    -webkit-box-pack:center;             
    -webkit-box-align:center;             
    background:yellow;             
    color:black;
}

11.使用css3的新属性transform:translate(x,y)属性 这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好

.demo{
    position:absolute;
    width:80px;
    height:80px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    background:green;
}

12.使用:before元素

.demo{
    position:fixed;
    display:block;
    top:0;
    right:0;
    bottom:0;
    left:0;
    text-align:center;
    background:rgba(0,0,0,.5);
}
.demo:before{
    content:'';
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
.demo .content{
    display:inline-block;
    vertical-align:middle;
    width:60px;
    height:60px;
    line-height:60px;
    color:red;
    background:yellow;
}

表格居中除了IE6/7都支持

<div id="box">
    <div id="content"></div>
</div>
#box { 
    display: table;
    height: 400px; 
    background: #c00; 
}
#content { 
    color: #fff; 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
}

inline-block居中：兼容性：支持inline-block的浏览器均可。对于IE6/7，可以先使用hack方式使其支持Inline-block后，使用此方法实现垂直居中。

<div id="box">
<div id="content">我是内容<br />我也是内容</div>
<div id="actor">我是演员</div>
</div>

#box {
　　height: 400px;
　　background: #c00;
}
#content, #actor {
　　display: inline-block;
　　vertical-align: middle;
}
#content {
　　font-size: 12px;
　　color: #fff;
}
#actor {
　　height: 400px;
　　font-size: 0;
}

inline行内元素居中；原理inline 元素的等内边距，上下两边的内边距相等，则中间内容居中

<div class="demo">
  <span>These</span>
  <span>elements</span>
  <span>will be</span>
  <span>centered vertically</span>
</div>

.demo {
  background-color: black;
  padding: 50px;
}

.demo span {
  background-color: gray;
  color: white;
  padding: 50px 0;
}

inline 元素的行高，行高与容器高度相等，则中间内容居中

<main>
<div class="demo">
<span>these</span>
<span>elements</span>
<span>will be</span>
<span>centered verticallay</span>
</div>
</main>


.demo {
  background-color: black;
  height: 100px;
}

.demo span {
  background-color: gray;
  color: white;
  line-height: 100px;
}

如果上面的代码都不生效的话，有可能行内元素是在表格里面，这个时候可以利用inline元素的 CSS 属性 vertical-align ，默认是 baseline 属性，将其设置为 middle，这个属性常用于 inline-level 和 table-cell 的元素

.demo {
  background-color: black;
  padding: 50px;
  display:table;
}

.demo span {
  display:table-cell;
  color: white;
  vertical-align: middle;
}

block 元素

block 元素利用绝对定位以及负外边距，适用于知道元素的宽度和高度，兼容性好，所以会看到很多远古时代的居中都采用这种办法，注意这里的外边距减去的是 block 元素宽度的一半，即margin:-（width/2） px


.parent{
    position:relative;
      
}

.child{
    position:absolute;
    top:50%;
    height:100px;
    margin-top:-50px;    
}

block 元素利用绝对定位以及 transform ，适用于不知道元素的宽度盒高度
.parent{
    position:relative;
      
}

.child{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
      
}

block 元素在外部的容器，利用 flex 的属性将其设置为下图，则子元素 block 元素垂直居中

.parent{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

block 元素水平居中

在垂直居中的基础上，block 元素的三种方法均能演变为水平垂直居中，前两种只需增加 left 属性以及 margin-left 或者 transformX 当中的一个属性达到目的
利用 flex 的话，添加多一个 align-items:center 即可

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>task1_4_1</title>
</head>
<body>
  <div class="container">
    <div id="circle1"></div>
    <div id="circle2"></div>
  </div>
</body>
</html>
.container{
      width: 400px;
      height: 200px;
      background-color: #ccc;
      position: absolute;
      left: 50%;
      top:50%;
      margin-top: -100px;
      margin-left: -200px;
      overflow: hidden;
    }
    #circle1, #circle2{
      border-radius: 50px;
      width: 100px;
      height: 100px;
      background-color: #fc0;
    }

    #circle1{
      position: relative;
      left:-50px;
      top: -50px;
    }
    #circle2{
      position: relative;
      left:350px;
      bottom: -50px;
    }

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>task4</title>
  <link rel="stylesheet" href="css/styles_2.css">
</head>
<body>
  <div class="container">
    <div id="circle1"></div>
    <div id="circle2"></div>
  </div>
</body>
</html>

.container{
  width: 400px;
  height: 200px;
  background-color: #ccc;
  position: absolute;
  left: 50%;
  top:50%;
  /*利用transform达到水平垂直居中效果*/
  transform: translate(-50%, -50%);
  overflow: hidden;
}
#circle1, #circle2{
  border-radius: 50px;
  width: 100px;
  height: 100px;
  background-color: #fc0;
  position: relative;
}
#circle1{
  left:-50px;
  top: -50px;
}
#circle2{
  left:350px;
  bottom: -50px;
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>task4</title>
  <link rel="stylesheet" href="css/styles_3.css">
  </head>
<body>
  <div class="wrap">
  <div class="container">
    <div id="circle1"></div>
    <div id="circle2"></div>
  </div>
  </div>
</body>
</html>

.wrap{
  width:500px;
  height: 500px;
  border: 1px solid black;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  width: 400px;
  height: 200px;
  background-color: #ccc;
  overflow: hidden;
  position: relative;
}
#circle1, #circle2{
  border-radius: 50px;
  width: 100px;
  height: 100px;
  background-color: #fc0;
  position: relative;
}
#circle1{
  left:-50px;
  top: -50px;
}
#circle2{
  left:350px;
  bottom: -50px;
}

查看全文

相关阅读:
【Python3】调用webserver接口
 【Robot Framework】字符串判断，if语句多执行条件，多执行语句
 【Robot Framework】BuiltIn库
 jenkins运行报错的两个坑
 【Python3】jsonpath-rw处理Json对象
 使用Grunt自动化任务
 用nodesjs+grunt+bower+angularjs搭建项目
 浅谈AngularJS中的$parse和$eval
AngularJS Controller之间的通信
 AngularJS动态绑定html

原文地址：https://www.cnblogs.com/lichihua/p/8433549.html