元素居中

HTML:

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"><img src="img/apple.jpg"></div>
<div class="inner-table">
        <div class="div4"><img src="img/apple.jpg"></div>
</div>
<div class="div5"></div>
<div class="div6">居中。。。。<img src="img/apple.jpg"></div>
<div class="div7">sdfsfsdf</div>
<div class="div8"><div class="centered">居中</div></div>

CSS:

    /*第一种方法*/
    /*兼容所有浏览器,但是宽高必须有固定值,灵活度低*/

.div1{
    position:absolute;
    width:100px;
    height:100px;
    background-color: red;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

/*第二种*/
/*避免重复计算margin负数值,宽高可以任意变化值,元素都是在中心,此方法适合移动端。ie6 + ie7 不支持*/
.div2{
    position:absolute;
    width:100px;
    height:100px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: yellow;
}

/*第三种*/
.div3{
    display: table-cell;
    width: 198px;
    height: 198px;
    text-align: center;
    vertical-align: middle;
    float: -left;
    background-color: red
    float:-left;   /*添加浮动后垂直居中会失效*/
}
.div3 img{
    width: 50%;
}

/*第四种*/
/*在div外面套一个div,并给外面的div设置为table属性,内表单模型*/
.inner-table{
    display: table;
    width: 100%;
    height: 100%;
}
.div4{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: red
}
.div4 img{
    width: 50%;
    display: block;
    margin: 0 auto;
}

/* 第五种 */
.div5{
    position: fixed;
    margin:  auto;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background-color: blue;
}

/*第六种*/
/* ie9以下不支持  */
.div6{
    height: 200px;
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}
.div6 img{
    width: 20%;
    display:block;
}

/* 第七种 */
.div7{
    width: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform:translate(-50%, -50%);
   transform:translate(-50%, -50%);
    background-color: orange;
}

/*第8种*/
.div8{
    position: relative;
    text-align: center;
    height: 198px;
}
.div8:before{
    content: ‘‘;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    background: #000;
}
.centered{
    display: inline-block;
    vertical-align: middle;
    width: 198px;
    background-color: green;
}
时间: 12-22

元素居中的相关文章

不定宽 块状元素居中3

通过给父元素设置float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中. 我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐:而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中. <s

元素居中问题

一.浮动元素居中 知道宽高 div{ width: 100px; height: 100px; background-color: red; float: left; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } 2.不知道宽高 div{ background-color: red; float: left; position: absolute; bottom: 0; left

CSS元素居中

html中元素分为行内元素和块级元素.采用margin或者float来使元素居中,是比较常见的方法. margin:0 auto只能用于块级元素,不能使行内元素居中. 参考知乎上为什么「margin:auto」可以让块级元素水平居中?,margin:0 auto,是左右外边距自适应,水平方向的 auto,其计算值取决于可用空间(剩余空间).元素本身为块级元素,那么水平方向可用空间的距离为其包含盒的宽度(宽度=盒总宽度-(padding-left+padding-right+border-left

不定宽块状元素居中方法

在实际的编写代码过程中,我们会遇到要为"不定宽块状元素"设置居中,比如网页上的分页导航,因为分页的数量不确定,所以我们不能通过设置宽度来限制它的弹性. 不定宽的块状元素有三种方法设置居中: 一.设置table标签: 利用table标签的自适应长度(table其长度根据其文本内容的长度决定),因此可以看做是"定宽度块元素",然后利用顶宽度块状元素居中的margin方法,使其水平居中. 例1:HTML代码 1 <!DOCTYPE html PUBLIC "

使定位元素居中的4种方法例举

例子: 创建两个div,定位父级'box'  和   定位元素'sun'.本文要做的是 'sun' 要在 'box' 中居中显示, 该怎么做呢? 定位前效果图: 定位元素居中后的效果图: HTML代码: <!--定位元素父级--> <div id="box"> <!--定位元素--> <div id="sun"></div> </div> 样式代码: <style type="t

行内元素和块级元素居中

内联元素 水平居中 1.行内元素居中:设置text-align:center; 2.flex布局:设置display:flex;justify-content:center; 垂直居中 父元素高度是单行文本:设置height=line-height; 父元素确定的是多行文本:a:插入table, 然后设置vertical-align:middle; b:先设置display:table-cell;然后设置vertical-align:middle; 块级元素 水平居中 1.定宽块级元素:设置左右

元素居中之Flex布局

在做页面布局的时候,多多少少都会遇到这个话题,如何使子元素居中于父元素中??? 对于这个问题,方法多种多样,之前也有对这个问题进行总结过,answer应该不少于10种吧.至于使用哪种方法比较好,我觉得这很大程度看个人喜好. 我经常使用的最多也就是一下几种:(以最简单的结构举例,元素宽高略 ) <div class='parent'> <div class=''child></div> </div> 1.定位 .parent{ position:relativ

CSS如何让浮动导航栏元素居中显示

CSS如何让浮动导航栏元素居中显示:制作导航栏是最为基础的布局技能之一,当然对于稍有经验的人员来说没有任何问题,不过对于初学者可能会有一定的困扰.普通的导航栏一般具有一下几个特点,整个导航栏居中,导航栏目具有,并且能够均匀分布,下面就是一个这样的简单代码实例.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

照片与同行元素居中的方法

1.照片与同行元素居中的方法:将同行元素和照片同时设置vertical-align:middle; <html><head> <title></title> <style type="text/css"> img{ vertical-align:middle; } span{ vertical-align: middle; } </style></head><body> <p>&

浮动元素居中的实现方法~~很不错

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float center</title> <style> .demo { /*最外层容器居中 非必要*/ border: 1px solid #CCC; margin: 5px auto; overflow: hidden; width: 143