CSS居中问题终极解决方案

最新推荐文章于 2025-01-01 08:42:53 发布

1005756352

最新推荐文章于 2025-01-01 08:42:53 发布

阅读量324

点赞数 1

分类专栏： Web前端文章标签：布局 css 居中

本文链接：https://blog.csdn.net/u013521169/article/details/50866723

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

水平居中

待居中的元素是inline（inline-*）

使包含在block中的inline element居中，只要给inline的包含block元素.center-children

.center-children {
  text-align: center;
}

待居中元素是block

给这个元素本身.center，但是必须要求宽度已定义。注意这种方法不适用于float的div
.center-me {
  margin: 0 auto;
<p>}</p>
多个block元素在一行共同居中
1.父元素 .inline-block-center，子元素div
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
<p>}</p>
2.父元素 .flex-center
.flex-center {
  display: flex;
  justify-content: center;
}

垂直居中

inline元素

1.单行

padding-top和padding-bottom相等就行（最简单的，多数情况不适用）

line-height=height(经常用)

2.多行

使用table元素，或者让父元素display:table,想居中的子元素display:table-cell，vertical-align:middle

无限bug的方案：
.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;
}
block元素

已知div的height情况下，利用绝对定位和负margin

不知道height情况下，利用绝对定位和transform：translate函数