CSS样式--居中设置

最新推荐文章于 2022-04-11 10:31:51 发布

like-Betty

最新推荐文章于 2022-04-11 10:31:51 发布

阅读量873

点赞数

分类专栏：前端文章标签： css flex position table

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

水平居中总结-不定宽块状元素方法

加入 table 标签
元素外加一个 table 标签 ( 包括<tbody>、<tr>、<td>)，为这个 table 设置“左右 margin 居中“。
设置 display：inline-block 方法
改变块级元素的 display 为 inline-block 类型，然后设置父元素 text-align:center来实现居中效果。

flex


.flex-center {
 display: flex;
 justify-content: center;
}

设置 position:relative 和 left:50%;
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
代码如下：

 <body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;

    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

垂直居中-父元素高度确定的单行文本（行间元素）

设置父元素的 height 和子元素的line-height
设置父元素的padding-top等于padding-bottom

垂直居中-父元素高度确定的多行文本（类行间元素）

插入 table (包括tbody、tr、td)标签
默认td元素具有vertical-align：middle
[这个样式只有在父元素为 td 或 th 时，才会生效]
设置父元素display: table;,
设置比如p元素包括的多行文本为display: table-cell;vertical-align：middle;
[ IE6、7 并不支持这个样式]
flex
设置父元素：

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

垂直居中-父元素高度不确定的多行文本（类行间元素）

ghost element

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;

<div class="ghost-center">
  <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>

垂直居中-高度确定的块级元素

 .parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

垂直居中-高度不确定的块级元素

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

垂直居中-块级元素

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

水平垂直居中-元素宽高确定

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;//包括padding
}

水平垂直居中-元素宽高不确定

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);//此处的-50%是基于当前元素的宽和高
}

水平垂直居中-flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS样式--居中设置

水平居中总结-不定宽块状元素方法

垂直居中-父元素高度确定的单行文本（行间元素）

垂直居中-父元素高度确定的多行文本（类行间元素）

垂直居中-父元素高度不确定的多行文本（类行间元素）

垂直居中-高度确定的块级元素

垂直居中-高度不确定的块级元素

垂直居中-块级元素

水平垂直居中-元素宽高确定

水平垂直居中-元素宽高不确定

水平垂直居中-flex

延伸阅读：