html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
互联网 & 04-08 15:29:48 & 作者：佚名 &
这篇文章主要介绍了html元素 水平居中、垂直居中、水平垂直居中于其父级元素的方法,需要的朋友可以参考下
html元素 水平居中 于 其父级元素的方法： 方法1： 代码如下: &div class="wrap"& &div class="left-right-middle1"&左右居中方法1&/div& &/div& 代码如下: html,body,div{ margin:0; padding:0; height:100%; position: } .wrap{ width:400 height:300 margin:10 border:1px solid #000; } .left-right-middle1{ width:200 background-color:#69F; margin:0 } 方法2： 代码如下: &div class="wrap"& &div class="left-right-middle2"&左右居中方法2&/div& &/div& 代码如下: html,body,div{ margin:0; padding:0; height:100%; position: } .wrap{ width:400 height:300 margin:10 border:1px solid #000; } .left-right-middle2{ width:200 background-color:#69F; left:50%; margin-left:-100 } html元素 垂直居中 于 其父级元素的方法： 代码如下: &div class="wrap"& &div class="top-bottom-middle"&上下居中&/div& &/div& 代码如下: html,body,div{ margin:0; padding:0; height:100%; position: } .wrap{ width:400 height:300 margin:10 border:1px solid #000; } .top-bottom-middle{ height:200 background-color:#69F; top:50%; margin-top:-100 } html元素 水平垂直居中 于 其父级元素的方法： 方法1： 代码如下: &div class="wrap"& &div class="all-middle1"&上下左右居中方法1&/div& &/div& 代码如下: html,body,div{ margin:0; padding:0; height:100%; position: } .wrap{ width:400 height:300 margin:10 border:1px solid #000; } .all-middle1{ width:200 height:200 background-color:#69F; top:50%; margin:-100px auto 0; } 方法2： 代码如下: &div class="wrap"& &div class="all-middle2"&上下左右居中方法2&/div& &/div& 代码如下: html,body,div{ margin:0; padding:0; height:100%; position: } .wrap{ width:400 height:300 margin:10 border:1px solid #000; } .all-middle2{ width:200 height:200 background-color:#69F; top:50%; left:50%; margin:-100px 0 0 -100 } 完整代码： 代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &meta http-equiv="Content-Type" content="text/html" charset="utf-8" /& &title&Div Middle&/title& &style type="text/css"& html,body,div{ margin:0; padding:0; height:100%; position: } .wrap{ width:400 height:300 margin:10 border:1px solid #000; } .left-right-middle1{ width:200 background-color:#69F; margin:0 } .left-right-middle2{ width:200 background-color:#69F; left:50%; margin-left:-100 } .top-bottom-middle{ height:200 background-color:#69F; top:50%; margin-top:-100 } .all-middle1{ width:200 height:200 background-color:#69F; top:50%; margin:-100px auto 0; } .all-middle2{ width:200 height:200 background-color:#69F; top:50%; left:50%; margin:-100px 0 0 -100 } &/style& &/head& &body& &div class="wrap"& &div class="left-right-middle1"&左右居中方法1&/div& &/div& &div class="wrap"& &div class="left-right-middle2"&左右居中方法2&/div& &/div& &div class="wrap"& &div class="top-bottom-middle"&上下居中&/div& &/div& &div class="wrap"& &div class="all-middle1"&上下左右居中方法1&/div& &/div& &div class="wrap"& &div class="all-middle2"&上下左右居中方法2&/div& &/div& &/body& &/html& 效果图：
大家感兴趣的内容
12345678910
最近更新的内容\ 经验分享
探究 HTML元素的水平垂直居中
我们在设计页面的时候，经常要把div居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。
到现在为止，探讨了很多种方法。
&div class="maxbox"&
&div class="minbox align-center"&&/div&
width: 500
height: 500
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
width: 200
height: 200
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
效果图（下面几种方法效果图一样）：
第一种： CSS绝对定位
主要利用绝对定位，再用margin设置为auto
水平垂直居中对齐：
.align-center{
bottom: 0;
第二种： CSS绝对定位
主要利用绝对定位，再用margin调整到中间位置。
水平垂直居中对齐：
.align-center{
left: 50%;
margin-left: -100
/*width/-2*/
margin-top: -100
/*height/-2*/
第三种： CSS绝对定位 + Javascript/JQuery
主要利用绝对定位，再用Javascript/JQuery调整到中间位置。相比第一种方法，此方法提高了class的灵活性。
水平垂直居中对齐：
.align-center{
left: 50%;
$(function(){
$(".align-center").css(
"margin-left": ($(".align-center").width()/-2),
"margin-top": ($(".align-center").height()/-2)
第四种： CSS3绝对定位 + 位移
使用绝对定位与CSS3的 transform: translate同样也可以达到效果。
水平垂直居中对齐：
.align-center{
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*向左向上位移*/
第五种： Flexbox: [伸缩布局盒模型]
要让元素水平垂直，对于Flexbox模型来说太容易了。
这里得改变一下HTML：
&div class="maxbox align-center"&
&div class="minbox"&&/div&
水平垂直居中对齐：
.align-center{
display: -webkit-
/*兼容问题*/
display: -ms-
justify-content:
align-items:
几种方法的比较：
第一种：使用CSS绝对定位margin设置为auto，兼容性很好，应该是一种最好的方法了。
第二种：使用CSS绝对定位margin调整，兼容性很好但是欠缺灵活性。如果有很多box里需要水平垂直居中，因其width，height不同而需要写不同的 .align-center 。
第三种：使用脚本语言，兼容性很好且弥补了第一种的缺点。不因width，height的改变而影响水平垂直居中的效果。
第四种：使用CSS3的一些新的属性，兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好，不因width，height的改变而影响水平垂直居中的效果。
第五种：使用Flexbox模型，在Chrom25.0+、Opera12.1，Firefox22+、IE11+都得到了支持，也是不因width，height的改变而影响水平垂直居中的效果。
若觉得本文不错，就分享一下吧！
作者的热门手记
请登录后，发表评论
评论加载中...
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11　　在HTML网页排版经常会用到关于对其方式的情况，水平居中和垂直居中。特别是水平居中，并不是一个简单的text-align就可以解决所有的情况。
　　开始之前普及一点HTML知识，目标很明显，不同的页面结构情况下，要达到居中的效果方式不同。
　　　　常用的块状元素有：
　　　　&div&、&p&、&h1&...&h6&、&ol&、&ul&、&dl&、&table&、&address&、&blockquote& 、&form&......此外为标签设置display:block也可强制将其他元素转化成块状元素。
　　　　常用的内联元素有：
　　　　&a&、&span&、&br&、&i&、&em&、&strong&、&label&、&q&、&var&、&cite&、&code&......当然块状元素也可以通过代码display:inline将元素设置为内联元素。
　　　　常用的内联块状元素有：
　　　　&img&、&input&.....代码display:inline-block就是将元素设置为内联块状元素。
　　默认状态下，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，宽度都为100%，即以行的形式占据位置。内联元素都会在所处的包含元素内从左到右水平分布显示。
　　水平居中
　　a).如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置&&text-align:center &来实现的。
　　当被设置元素为块状元素时用 text-align：center 并达不到居中的效果。分为定宽块状元素和不定宽块状元素两种情况。
　　b).定宽块状元素，对其板块本身进行设置：
　　c).不定宽块状(这是最常遇到的情况)，可以细分为3个小方法:
加入 table 标签
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 &tbody&、&tr&、&td&&)。第二步：为这个 table 设置&左右 margin 居中&（这个和定宽块状元素的方法一样）。
设置&inline 方法
改变块级元素的 dispaly 为 inline 类型& display:&，然后使用& text-align:&来实现居中效果
设置 position:relative 和 left:50%;
通过给父元素设置 float，然后给父元素设置 &position:relative&&和 &left:50%&，子元素设置 &position:relative &和 &left:-50% &来实现水平居中。
　　垂直居中
　　　a).父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
height:100
line-height:100
　　　b).父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
　　使用插入 table (包括tbody、tr、td)标签，同时设置 &vertical-align：middle&。(PS:css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效)　
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的& display:table-&，激活 vertical-align 属性。
阅读(...) 评论()68被浏览9,344分享邀请回答37添加评论分享收藏感谢收起//方式1定位1
top: 50%; left: 50%;
width: height:
margin: -y/2 0 0 -x/2;
//方式1定位2
top: 50%; left: 50%;
width: height:
transform: translate(-50%, -50%);
//好处是不用知道元素高度
//方式1定位3
top: 0; left: 0; right: 0; bottom: 0;
width: height:
//关键属性
//方式2 - 未知元素垂直居中方式
xx-Parent:after
//xx的父级元素的after
width: 1 height: 100%;
content: ''; display: inline-
vertical-align:
margin-right: -1
vertical-align:
display: inline-
一般定位无非那么几种：1.text-align:line-height: XX不过只是针对行间元素的；2.最常用的就是通过定位实现：给要垂直居中的元素的直接父元素加上position:给垂直居中的元素加上position:然后通过top:50%,left:50%;margin-left：-(宽度/2)margin-left:-(高度/2)来实现的；3.第三种是拓展思路用的：要给一个元素居中可以先给这个元素包一层div:&div class="wrapper"&
&span&要居中的元素&/span&
给class为wrapper的div添加空白的文本：.wrapper:before { content:' '; text-align:center;}
span { position: absolute; margin-left: -(宽度/2)px;}
这个方法利用了absolute的跟随特性。4.是利用flex布局，可以用在手机端，pc端兼容不好：display: flex;
justify-content: center;
align-items: center;
5. translate191 条评论分享收藏感谢收起