css的水平垂直居中

最新推荐文章于 2024-05-22 14:00:00 发布

好菇凉°~

最新推荐文章于 2024-05-22 14:00:00 发布

阅读量58

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_51911435/article/details/125764011

版权

css

0.如何实现一个元素的水平垂直居中

要求对行内元素、块状元素及不定宽高的块状元素均可适用：
可打开 codepen 进行调试 https://codepen.io/shanyue/pen/XWMdabg以下是布局代码

<div class="container">
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    块状元素
  </div>
</div>

<div class="container">
  <div class="item">不定高宽的块状元素</div>
</div>

<div class="container">
  <span class="item">行内元素</span>
</div>

.container {
  // 把代码写在这里
}

.container {
  height: 20rem;
  background: #ccc;
  margin: 1rem;
}

绝对定位方法：

.box {
  postion: absolute;
  top: 50%;
  bottom: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
}
<body>
<div class="box"><div>
</body>

flex 方法：

body {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
  width: 50px;
  height: 50px;
}

<body>
<div class="box"><div>
</body>

提供一些现代浏览器下使用 flex/grid 的方法，不仅支持块状元素，而且支持行内元素，对固定高宽与不固定高宽皆可使用。

使用 flex，以下是经典的垂直居中。

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

效果可以见 codepen

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}

.container {
  display: grid;
  justify-content: center;
  align-items: center;
}

.container {
  display: grid;
  justify-items: center;
  align-content: center;
}

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

三个属性略显啰嗦，其实只需两个属性即可:

.container {
  display: grid;
  place-items: center;
}

.container {
  display: grid;
  place-content: center;
}

引自：https://css-tricks.com/centering-css-complete-guide/ 1 该元素的宽高固定吗？在将元素绝对定位为 top: 50%; left: 50%;后，可以使用值为宽的一半和高的一半的负 margin 实现垂直水平居中。（跨浏览器支持很不错）

.parent {
  position: relative;
}

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

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

  margin: -70px 0 0 -170px;
}

2 该元素宽高未知？（1）如果宽高未知，在将元素绝对定位为 top: 50%; left: 50%;后，可以使用 transform 属性来做负的 50%移动（基于当前元素宽高）。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
（2）也可以元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并 margin: auto，不需要提前知道尺寸兼容性好。

.container {
  position: relative;
  height: 300px;
  border: 1px solid red;
}
.item {
  width: 100px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid green;
}

3 你要用 flexbox 吗？对 flexbox 进行垂直水平居中，只需设置两个属性为 center: align-items、justify-content。

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

4 你要用 grid 布局吗？父容器设置为 grid 布局后，子元素直接 margin: auto;即可实现垂直水平居中。

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

详细案例解释可参考：https://zhuanlan.zhihu.com/p/87134477
你不知道的 flex 布局～

.box {
  display: flex;
}

.item {
  margin: auto;
}

这个方法眼前一亮，试了一下: 行内元素与块状元素均可，学习了！
https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/

好菇凉°~

关注

0
点赞
踩
1

收藏

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

css水平垂直居中
复制链接

扫一扫

css的水平垂直居中

css

0.如何实现一个元素的水平垂直居中

“相关推荐”对你有帮助么？