css的水平居中

#page{

width: 100%;

color: white;

}

.he{

width: 100%;

height: 100px;

background: #625050;

text-align: center;

line-height: 100px;

}

.bo{

width: 100%;

background: #6aa087;

}

.fo{

height: 100px;

background: #2f5d34;

}

.content{

height: 100px;

border: 2px solid #fff;

}

.content1{

background: #66a05c;

text-align: center;

}

.content2{

background: #8a5841;

text-align: center;

}

.content2Bo{

height:50px;

width: 60%;

border: 2px solid red;

line-height: 50px;

margin: 0 auto;

}

.content3{

background: #2f5d34;

}

table{

margin: 0 auto;

}

.content4{

background: #8a5841;

text-align: center;

}

.contentBo4{

display: inline;

}

ul li{

list-style-type: none;

}

.content5{

float: left;

position: relative;

left: 50%;

}

.contentBo5{

position: relative;

left: -50%;

background: #231b40;

}

.content6{

width: 100%;

text-align: center;

background: #9ca05c;

display: flex;

align-items: center;

justify-content: center;

}

.content7{

position: relative;

}

.contentBo7{

position: absolute;

left: 0;

right: 0;

width: 80%;

border: 2px solid red;

margin: 0 auto;

text-align: center;

}

下面是对元素水平居中对齐的几个例子以及说明

这是内容区一：实现对行内元素的水平居中显示采用text-align:center;的方式。

这是内容区二:红色区域部分采用margin:0 auto;来实现水平居中显示，当然要写好元素的宽度。

这是内容区三：用table实现。

这是第一行
这是第二行
这是内容区四：本来是contentBo4的块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示。

这是内容区五：父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分。

这是内容区六:采用css3的flexbox，position:flex;

这是内容区七:用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中。

 总结下：其实实现水平居中只有一下几种思路：

1：对于最简单的行内元素的居中采用text-align:center;设置即可。

2：对于最普通的水平居中采用绝对定位后设置left：50%;后再采用各种方式去实现自身水平差的补回。

3：对于普通的元素对齐还可以采用绝对定位后left:0;right:0;加上元素的宽度，在此基础之上就可以采用margin:auto;实现水平对齐了。

4：用css3的Flexbox属性

5:在元素外嵌套table实现，但是这样会有很多层嵌套

6：marin:0 auto;方便的实现已知宽度的水平居中

html位置水平居中,html元素水平居中的几种方法相关推荐

html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
自动化测试元素定位的8种方法：
自动化测试元素定位的8种方法: 1.通过id属性定位: find_element_by_id() 复数形式: find_elements_by_id() 2.通过name属性定位: find_elem ...
HTML元素的隐藏四种方法
HTML元素的隐藏四种方法一.方法一:display设置为none 元素不显示,也不占据任何位置,不占据任何空间(和不存在一样) <!DOCTYPE html> <html lan ...
JAVA 取出Map元素值的三种方法
JAVA 取出Map元素值的三种方法: (1)方法一: 通过Map的keySet()方法获取key 的set ,迭代set元素(每个元素调再用Map的get()方法); (2)方法二 : 通过Map ...
html td 水平居中,html元素水平居中的几种方法
下面我将一一的介绍关于html元素水平居中的几种方式一:对于行内元素采用text-align:center;的方式二:采用margin:0 auto;来实现水平居中显示三:用table实现四: ...
html调整垂直居中,html元素垂直居中的几种方法
元素的垂直居中 #page{ width: 100%; text-align: center; color:white; } #hd{ height: 20px; background: rgba(2 ...
html中元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求.下边将五种常用的居中方法进行总结. 1:原始图(父子元素无border,无padding): 2:实现居中效果: 一:使用margin进行固定长度的 ...
CSS隐藏元素的十四种方法
通过设置width:0或者height:0隐藏一个元素,文字隐藏可以设置color为背景色或transparent,但内容还在,所以用font-size:0: 将元素的opacity设置为0,元素本身 ...
将页面元素隐藏的10种方法
在Web开发中,隐藏页面元素使其视觉不可见是一个非常常见的需求.为了实现这一目标,我们通常会采用多种方法,最常用的例如CSS的display属性,只要设置为node即可隐藏元素. 本文将通过对当前所有 ...
python元素定位的八种方法_selenium webdriver基于Python系列之八种元素定位方法
1.id.name.class name.tag name.link text.partial link text.xpath.css selector在 Python 语言中对应的定位方法如下: f ...

html位置水平居中,html元素水平居中的几种方法

下面是对元素水平居中对齐的几个例子以及说明

html位置水平居中,html元素水平居中的几种方法相关推荐

最新文章

热门文章