html div 水平垂直居中显示,利用CSS实现div水平垂直居中

实现居中的方案有很多，这里介绍下纯CSS使用absolute配合margin的方案。

1. p宽高固定width: 400px;

height: 200px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -200px;

margin-top为-(height / 2)，margin-left为-(width / 2)。当然也可以不用margin，即top为calc(100% - height) / 2，left为calc(100% - width) / 2，但是建议可以不用calc()就不要用。

2. p宽高不固定width: 50%;

height: 50%;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

注意，这适用于宽高需指定的情况，比如使用百分比或者用js动态修改，不然可能被当成100%处理。

也可以不用margin用translate()，如下：width: 50%;

height: 50%;

position: absolute;

top: 50%;

left: 50%;

transform: translateX(-50%) translateY(-50%);

3. CSS3不定宽高水平垂直居中justify-content: center; /* 子元素水平居中 */

align-items: center; /* 子元素垂直居中 */

display: -webkit-flex;

在父级元素上添加，即可实现子元素水平垂直居中。

html div 水平垂直居中显示,利用CSS实现div水平垂直居中相关推荐

html怎么设置一个div可以左右移动,利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
css div下第一个span,CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
利用css实现元素水平垂直居中的方法（分情况讨论）
首先需要说明,根据标准盒模型(这里暂且不关注低版本IE的盒模型),我们在css中设置的width指的是content-width,padding,margin,top,left这些属性为百分数时,计算 ...
利用CSS设置页面的垂直居中效果
实现垂直居中关键的属性是text-align(文字的对其样式),line-align(垂直居中的高度),vertical-align(垂直居中) <!DOCTYPE html> <h ...
PHP左侧分类表显示,利用CSS实现wordpress侧边栏分类目录分两列显示 | 迷失的世界...
细心的童鞋或许已经发现了我的博客侧边栏的那个分类目录已经由原来的一栏显示变成分两栏显示了,这个主要是根据你自己博客的需要去修改的,如果你希望实现,可以有很多功能强大的插件去实现分类目录分两栏显示,但是 ...
html文字往右边偏移怎么做,div向右偏移设置 css让div靠右移必定距离
转自:https://www.thinkcss.com/shili/1372.shtmlcss div对象盒子向右偏移设置,使用css让div靠右必定距离-div向右移教程实例篇html div向右偏 ...
html怎么给div加阴影,怎么用css实现div的阴影效果？
在css中,给div添加阴影效果主要使用box-shadow属性,但需要注意不同的浏览器需要作不同的处理来提高样式的兼容性.下面介绍如何用CSS实现DIV块的阴影效果. css可以使用box-shad ...
html屏幕垂直居中显示,HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结...
水平居中直接加上标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法放上示范的html代码: MAIN 方法一: div使用绝对布局, ...

html div 水平垂直居中显示,利用CSS实现div水平垂直居中

html div 水平垂直居中显示,利用CSS实现div水平垂直居中相关推荐

最新文章

热门文章