CSS七种常用居中方式

来源：互联网发布：印度综合实力知乎编辑：程序博客网时间：2024/06/14 03:39

1. 水平居中

效果:
这里写图片描述

<!DOCTYPE html><html lang="en"><head>  <title>水平居中</title>  <style type="text/css">    body {      background-color: #CCC;    }    .container {      margin: 0 auto;      background-color: #ddd;      text-align: center;    }  </style></head><body>  <div class="container">    <span>这是c_kite的CSDN博客</span>  </div></body></html>

或者使用绝对定位方式

    .container {      position: absolute;      left: 50%;      width: 960px;      margin-left: -480px;      text-align: center;      background: #ddd;    }

2. 自适应块级元素水平居中

效果: 宽度不固定, 也可以自适应居中
这里写图片描述

<!DOCTYPE html><html lang="en"><head>  <title>水平居中</title>  <style type="text/css">    .container{      display: inline-block;    }    .box {      width: 50px;      height: 50px;      list-style: none;      border: 1px solid #ccc;      border-radius: 50%;      padding: 0;      box-shadow: 0 6px 12px rgba(0,0,0,.175);    }    .container .center{      position: relative;      left: 50%; /*左边缘移动到父元素的中心*/      transform: translateX(-50%); /*左边缘向左移动自身宽度的一半*/      text-align: center; /*文字居中*/    }  </style></head><body>  <div class="container">    <div class="box"></div>    <div class="center">hi</div>  </div></body></html>

3. 行内元素垂直居中

单行文本垂直居中

效果:
这里写图片描述

<!DOCTYPE html><html lang="en"><head>  <title>水平居中</title>  <style type="text/css">  .row {    width: 300px;    height: 50px;    line-height: 50px;    border: 1px solid black;    text-align: center;  }  </style></head><body>  <div class="row">    你好你好你好  </div></body></html>

4. 多行文本垂直居中

( 1 ). 不固定高度垂直居中

效果: ![这里写图片描述](http://img.blog.csdn.net/20171210105814084?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY19raXRl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)代码:

<!DOCTYPE html><html lang="en"><head>  <title>水平居中</title>  <style type="text/css">  .row {    width: 200px;    padding: 50px;    border: 1px solid black;  }  </style></head><body>  <div class="row">    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好  </div></body></html>

( 2 ). 固定高度多行文本居中

效果:
这里写图片描述

<!DOCTYPE html><html lang="en"><head>  <title>水平居中</title>  <style type="text/css">  .wrap {    height: 200px;    display: table;/*此元素会作为块级表格来显示*/  }  .content {    vertical-align: middle;/*把此元素放置在父元素的中部*/    display: table-cell;/*此元素会作为一个表格的单元格显示*/    border: 1px solid black;    width: 400px;  }  </style></head><body>  <div class="wrap">    <div class="content">      博主非常喜欢林徽因的诗句: 我情愿化成一片落叶， 让风吹雨打到处飘零； 或流云一朵，在澄蓝天， 和大地再没有些牵连。    </div>  </div></body></html>

5. 块级元素的垂直居中

( 1 ). 固定高度

效果:
这里写图片描述

代码:

<!DOCTYPE html><html lang="en"><head>  <title>水平居中</title>  <style type="text/css">  .wrap {    width: 100px;    height: 100px;    position: absolute;    left: 50%;    top: 50%;    margin-left: -50px;    margin-top: -50px;    background: #dddddd;  }  </style></head><body>  <div class="wrap">      博主非常喜欢林徽因的诗句  </div></body></html>

( 2 ). 不固定高度

效果:
这里写图片描述

代码:

<!DOCTYPE html><html lang="en"><head>  <title>水平居中</title>  <style type="text/css">  .wrap {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);/*左, 上边缘向左, 上移动自身宽, 高度的一半*/    background: #dddddd;  }  </style></head><body>  <div class="wrap">      博主非常喜欢林徽因的诗句  </div></body></html>

6. 基于视口单位的解决方案

效果:
这里写图片描述

代码:

<!DOCTYPE html><html lang="en"><head>  <title>水平居中</title>  <style type="text/css">  .wrap {    width: 200px;    padding: 20px;    margin: 50vh auto 0;/*外边距采用视口单位*/    transform: translateY(-50%);/*上边缘向上移动自身高度的一半*/    background: #dddddd;  }  </style></head><body>  <div class="wrap">      博主非常喜欢林徽因的诗句  </div></body></html>

7. 基于FlexBox的解决方案

当使用flexbox的时候. 样式margin设置为auto不仅在水平方向上居中, 在垂直方向上也居中, 如果仅需要实现单独的垂直居中需求, 需使用align-self设置为center
效果:
这里写图片描述

代码:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>水平居中</title>  <style type="text/css">  body{    display: flex;    min-height: 100vh;    margin: 0;  }  .wrap {    margin: auto;    padding: 20px;    background: #dddddd;  }  </style></head><body>  <div class="wrap">      博主非常喜欢林徽因的诗句  </div></body></html>

阅读全文

0 0