css垂直水平居中

最新推荐文章于 2021-12-02 23:28:46 发布

ifredom_

最新推荐文章于 2021-12-02 23:28:46 发布

阅读量132

点赞数

分类专栏： javascript 文章标签： css html css3 flex

本文链接：https://blog.csdn.net/win7583362/article/details/114094930

版权

javascript 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

css 元素居中

CSS 布局，推介统统使用 Flex

<style>
  .father {
    background-color: pink;
  }
  .child-1 {
    background-color: #ccc;
  }
  .child-2 {
    background-color: orangered;
  }
</style>

<body>
  <div class="father">
    <span class="child-1">hellow world</span>
    <div class="child-2">Japan</div>
  </div>
</body>

水平居中

水平居中，Dom 节点至少需要有一个包含关系，也就是两个元素

1.让子元素水平居中，子元素如果为行内元素，那么

.father {
  text-align: center;
}

2.让子元素水平居中，子元素如果为块元素，前提是子元素必须要有一个宽度,那么

.child-2 {
  background-color: orangered;
  width: 200px;
}

3.让子元素作为整体水平居中，那么（推介）

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

4.使用 CSS3 中新增的 transform 属性，那么

.father {
  position: relative;
}
.child-1 {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

5.使用绝对定位方式, 以及负值的 margin-left,前提是子元素宽度一定，那么

.child-1 {
  position: absolute;
  width: 200px;
  left: 50%;
  margin-left: -100px;
}

垂直居中

1.若子元素是单行文本, 则可设置子元素 line-height 等于父元素高度，前提是父元素有确切高度，不能是百分比

.father {
  height: 200px;
  background-color: pink;
}

.child-1 {
  background-color: #ccc;
  line-height: 200px;
}

2.若子元素是行内块级元素, 基本思想是使用 display: inline-block, vertical-align: middle 和一个伪元素让内容块处于容器中央.（兼容 IE7）

.father {
  height: 300px;
  background-color: pink;
}

.father::after {
  display: inline-block;
  vertical-align: middle;
  content: "";
  height: 100%;
}
.child-2 {
  background-color: orangered;
  display: inline-block;
  vertical-align: middle;
}

元素高度不定

3.使用 flex，需浏览器厂商前缀

.father {
  background-color: pink;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
}

4.使用 vertical-align 属性，需浏览器厂商前缀

.father {
  background-color: pink;

  width: 300px;
  height: 300px;
  display: table;
}

.child-1 {
  background-color: #ccc;

  display: table-cell;
  vertical-align: middle;
}

.child-2 {
  background-color: orangered;

  display: table-cell;
  vertical-align: middle;
}

5.使用 transform，需浏览器厂商前缀

.father {
  position: relative;
}
.child-1 {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

6.使用绝对定位方式, 以及负值的 margin-left,前提是子元素高度一定，父元素有高度，那么

.father {
  background-color: pink;
  height: 300px;
  position: relative;
}
.child-2 {
  position: absolute;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

ifredom_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css垂直水平居中

css 元素居中CSS 布局，推介统统使用 Flex<style> .father { background-color: pink; } .child-1 { background-color: #ccc; } .child-2 { background-color: orangered; }</style><body> <div class="father"> <span cl
复制链接

扫一扫

专栏目录