CSS - 实现垂直居中的几种方式

栏目: CSS · 发布时间: 7年前

内容简介:translateflex和margin:auto2. 元素为为定宽定高(自身包含尺寸的元素)的元素

1. 元素为未知宽高的元素

flex

http://www.ruanyifeng.com/blo...
display: flex;
justify-content:center;
align-items:Center;

translate

position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;

flex和margin:auto

.box{
    display: flex;
    text-align: center;
}
.box span{margin: auto;}

2. 元素为为定宽定高(自身包含尺寸的元素)的元素

绝对定位和负边距

position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;

绝对定位和0

原理:当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性,具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样

width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0;

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Pro Django

Pro Django

Marty Alchin / Apress / 2008-11-24 / USD 49.99

Django is the leading Python web application development framework. Learn how to leverage the Django web framework to its full potential in this advanced tutorial and reference. Endorsed by Django, Pr......一起来看看 《Pro Django》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码