赞
踩
目录
5.绝对定位 + transform (无须知晓盒子的具体大小)
如何实现:
在父元素上添加:
display: flex;
align-items: center;
justify-content: center;
- <style>
- * {
- padding: 0;
- margin: 0;
- }
-
- .parent {
- display: flex;
- /* 水平居中 */
- justify-content: center;
- /* 垂直居中 */
- align-items: center;
- width: 500px;
- height: 500px;
- background-color: aqua;
- }
-
- .child {
- width: 200px;
- height: 200px;
- background-color: pink;
- }
- </style>
-
- <body>
- <div class="parent">
- <div class="child">我要水平垂直居中</div>
- </div>
- </body>
如何实现:
在父元素上添加:
display: grid;
place-items: center;
- <style>
- * {
- padding: 0;
- margin: 0;
- }
-
- .parent {
- display: grid;
- /* 水平和垂直方向都居中对齐 */
- place-items: center;
- width: 500px;
- height: 500px;
- background-color: aqua;
- }
-
- .child {
- width: 200px;
- height: 200px;
- background-color: pink;
- }
- </style>
-
- <body>
- <div class="parent">
- <div class="child">我要水平垂直居中</div>
- </div>
- </body>
相对父级上边和左边,或者下边和右边各移动50%,同时通过外边距减去自身的宽高各一半的大小。
如何实现:
在父元素上添加:
position: relative;
在子元素上添加:
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; //子元素高度的一半
margin-left: -100px; //子元素宽度的一半
- <style>
- * {
- padding: 0;
- margin: 0;
- }
-
- .parent {
- position: relative;
- width: 500px;
- height: 500px;
- background-color: aqua;
- }
-
- .child {
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -100px;//子元素高度的一半
- margin-left: -100px;//子元素宽度的一半
- width: 200px;
- height: 200px;
- background-color: pink;
- }
- </style>
-
- <body>
- <div class="parent">
- <div class="child">我要水平垂直居中</div>
- </div>
- </body>
将盒子的上下左右定位全部设置为0,同时设置外边距自适应
如何实现:
在父元素上添加:
position: relative;
在子元素上添加:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
- <style>
- * {
- padding: 0;
- margin: 0;
- }
-
- .parent {
- position: relative;
- width: 500px;
- height: 500px;
- background-color: aqua;
- }
-
- .child {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- width: 200px;
- height: 200px;
- background-color: pink;
- }
- </style>
-
- <body>
- <div class="parent">
- <div class="child">我要水平垂直居中</div>
- </div>
- </body>
使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小
如何实现:
在父元素上添加:
position: relative;
在子元素上添加:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
- <style>
- * {
- padding: 0;
- margin: 0;
- }
-
- .parent {
- position: relative;
- width: 500px;
- height: 500px;
- background-color: aqua;
- }
-
- .child {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- width: 200px;
- height: 200px;
- background-color: pink;
- }
- </style>
- <body>
- <div class="parent">
- <div class="child">我要水平垂直居中</div>
- </div>
- </body>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。