<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex__container {
display: flex;
background-color: blanchedalmond;
border: 1px solid black;
width: 500px;
height: 500px;
justify-content: center;
align-items: center;
}
.flex__item {
background-color: cadetblue;
border: 1px solid black;
width: 300px;
height: 300px;
}
.flex__container1 {
display: inline-flex;
background-color: blanchedalmond;
border: 1px solid black;
width: 500px;
height: 500px;
justify-content: center;
align-items: center;
}
.flex__container2 {
display: flex;
flex-direction: column;
background-color: blanchedalmond;
border: 1px solid black;
width: 500px;
height: 500px;
justify-content: center;
align-items: center;
}
.flex__container1a {
display: flex;
justify-content: center;
background-color: blanchedalmond;
border: 1px solid black;
width: 500px;
height: 500px;
}
.flex__item1 {
background-color: cadetblue;
border: 1px solid black;
width: 300px;
height: 300px;
align-self: center;
}
.flex__container1b {
display: flex;
place-content: center;
background-color: blanchedalmond;
border: 1px solid black;
width: 500px;
height: 500px;
}
.flex__item2 {
background-color: cadetblue;
border: 1px solid black;
width: 300px;
height: 300px;
align-self: center;
}
.flex__container2b {
display: flex;
place-content: center;
place-items: center;
background-color: blanchedalmond;
border: 1px solid black;
width: 500px;
height: 500px;
}
.grid_container {
display: grid;
place-items: center;
background-color: blanchedalmond;
border: 1px solid black;
width: 500px;
height: 500px;
}
.grid_item {
background-color: cadetblue;
border: 1px solid black;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
Flexbox中实现水平垂直居中 在Flexbox布局模块中，不管是单行还是多行，要让它们在容器中水平垂直居中都是件易事，而且方法也有多种。 最常见的是在Flex容器上设置对齐方式，在Flex项目上设置margin:auto。 先来看在Flex容器上设置对齐方式。 Flex容器和Flex项目上设置对齐方式 从《图解CSS：Flexbox布局(Part1)》一文中， 我们可以知道在Flex容器上设置justify-content、align-items的值为center时，可以让元素在Flex容器中达到水平垂直居中的效果。
<div class="flex__container">
<div class="flex__item"></div>
</div>
这种方式特别适应于让Icon图标在容器中水平垂直居中，不同的是在Icon图标容器上显示设置 display: inline-flex。 比如下面这个示例：
<div class="flex__container1">
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
</div>
在这种模式之下，如果要让多个元素实现水平垂直居中的效果，那还需要加上 flex-direction: column
<div class="flex__container2">
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
</div>
在Flexbox布局中，还可以像下面这样让Flex项目在Flex容器中达到水平垂直居中的效果：
<div class="flex__container1a">
<div class=" flex__item1"></div>
</div>
如果在Flex容器中有多个Flex项目时，该方法同样有效：
<div class="flex__container1a">
<div class="flex__item1"></div>
<div class="flex__item1"></div>
<div class="flex__item1"></div>
</div>
除此之外，还可以使用place-content: center让Flex项目实现水平垂直居中：
<div class="flex__container1b">
<div class="flex__item2"></div>
</div>
或者换：.flex__container { display: flex;place-content: center;place-items: center; }
<div class="flex__container2b">
<div class="flex__item2"></div>
</div>
可能很多同学对于place-content和place-items会感到陌生。其实place-content是align-content和justify-content的简写属性；而place-items是align-items和justify-items的简写属性。 即：。 如果在Flex容器中只有一个Flex项目，还可以显式在Flex项目中显式设置margin的值为auto，这样也可以让Flex项目在Flex容器中水平垂直居中。 CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。
在CSS Grid布局中，只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。比如下面这个示例:
<div class="grid_container">
<div class="grid_item"></div>
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
