div居中css代码（css笔记：如何让一个div居于页面正中间_html/css_WEB-ITnose）

本文目录

• css笔记：如何让一个div居于页面正中间_html/css_WEB-ITnose
• div+css页面居中代码
• css如何实现图片大于div时的居中显示（代码实例）
• CSS如何使DIV层水平居中（包括水平/垂直）[转]_html/css_WEB-ITnose
• css如何将div实现全屏水平垂直居中_html/css_WEB-ITnose
• css 里面怎么让一个DIV居中
• 如何让一个div居中 CSS怎样让一个div居中
• CSS如何使DIV层居中_CSS/HTML
• css如何实现图片在div中垂直居中
• CSS 一个DIV里面的文字如何上下左右居中显示

css笔记：如何让一个div居于页面正中间_html/css_WEB-ITnose

如何让一个div居于页面中间，我今天说的是让一个div水平居中同时垂直居中，而不是简单的top：50%，left：50%。当然，我们就按一开始的思路写一下：top，left属性都设为50%，看一下效果。
div居于页面正中间*{ margin: 0; padding: 0; background-color: #EAEAEA; } div{ width: 200px; height: 200px; background-color: #1E90FF; } .center-in-center{ position: absolute; top: 50%; left: 50%; }
从我的截图可以看出，div的左顶点刚好在页面的中心点处。现在的思路是，如何移动div然后让div的中心和页面中心重合，即可达到我们一开始想要的结果。在这里我要介绍一种方法，使用css的transform属性。由于这个属性的值很多，我这里就不一一介绍，只是说一下它的translate。我们给刚才的center-in-center类加上translate(0,-50%)
.center-in-center{ position: absolute; top: 50%; left: 50%; transform: translate(0, -50%);}
如果使用过这个属性，应该知道怎么回事了。translate(0, -50%)，第一个值是指水平移动量，和tansform的translateX效果一样，第二个值那就是垂直方向偏移量，但为负数时，代表反方向移动。现在我们只需tanslate(-50%,-50%)就可以达到div既水平居中同时垂直居中。
附上完整代码与效果：
div居于页面正中间*{ margin: 0; padding: 0; background-color: #EAEAEA; } div{ width: 200px; height: 200px; background-color: #1E90FF; } .center-in-center{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
说多两句，这也可以是一道非常不错的面试题，大家可以留意一下。当然还有其他解法，这里就不再班门弄斧了。另外，css3的transform是一个非常强大的属性，可以做很多变换3d之类的炫酷效果，如果有兴趣可以深入研究一下。但前端有一个不得不说的痛，浏览器兼容性问题。。其他的浏览器还好说，万恶的IE，IE9支持一小部分属性，IE9以下全部不支持。如果还深爱着IE，那只能另辟蹊径，甚至不惜用js去解决咯！又快到周末了，又可以好好睡觉了，真好！

div+css页面居中代码

网页经常需要将div在屏幕中居中显示，以下几个常用的方法，都比较简单。

水平居中直接加上

下面说两种在屏幕正中（水平居中+垂直居中）的方法，放上示范的html代码：

方法一：

div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。

.main{

text-align:center;/*让div内部文字居中*/

background-color:#fff;

border-radius:20px;

width:300px;

height:350px;

margin:auto;

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

}

效果如图：

方法二：

仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。

.main{

text-align:center;

background-color:#fff;

border-radius:20px;

width:300px;

height:350px;

position:absolute;

left:50%;top:50%;

transform:translate(-50%,-50%);

}

方法三：

对于水平居中，可以使用最简单的

这个

css如何实现图片大于div时的居中显示（代码实例）

本文给大家介绍css如何实现图片大于div时的居中显示（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
当图片大于p时，想要图片居中显示，如果图片等比例缩小可能会导致图片不能填充整个p，如果直接将图片不设置宽高，将其外层p设置overflow:hidden；这时即使外层p设置了水平垂直居中，图片也不是居中的效果：
解决方法：
1- 把图片设置为背景图片
《div class="face-img-contain" id="face-img-back"》
《/div》.face-img-contain{
width:348px;
height:436px;
margin:0 auto;
margin-top: 14px;
position: relative;
background-image: url(../images/face-img/test-22.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid gainsboro;
}若是后台返回的地址，别忘了拼接方法正确
$("#face-img-back").css("background-image","url("+faceImg+")");2- 给图片设置相对p的100%的宽高，再设置object-fit:cover;
《div class="face-img-contain-new-new"》
《img src="../images/face-img/test-22.png" alt="" class="face-img-defined1" id="face-img-photo"》
《/div》.face-img-contain-new-new{
width:348px;
height:436px;
margin:0 auto;
margin-top: 14px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border: 1px solid gainsboro;
}
.face-img-defined1{
width:100%;
height:100%;
object-fit:cover;
}总结：

CSS如何使DIV层水平居中（包括水平/垂直）[转]_html/css_WEB-ITnose

***隐藏网址***
CSS如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实验得出以下结论: 正确的也是对页面构造没有影响的设置如下: 对需要水平居中的DIV层添加以下属性:
margin-left: auto;margin-right: auto;
经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.问题到底出在哪里呢?感谢网友乐天无用帮忙找出了这个邪门问题的原因.原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.问题并不在CSS而在XHTML网页本身.需要加上这样的代码才能使得上述设置有效果:
如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版.如何使DIV居中主要的样式定义如下：body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
***隐藏网址***
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"如何使文本在DIV中垂直居中果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下： body{TEXT-ALIGN: center;}#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto;height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}test content
说明：vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中body{text-align: center;}#a{width: 200px;height: 400px;background: #000;}#b{margin-top: expression((a.clientHeight-50)/2);width: 50px;height: 50px;background: #FFF;}#c{position: absolute;left: expression((body.clientWidth-50)/2);top: expression((body.clientHeight-50)/2);width: 50px;height: 50px;background: #F00;}
另一方法:

css如何将div实现全屏水平垂直居中_html/css_WEB-ITnose

css如何将div实现全屏水平垂直居中:本章节介绍一下如何将一个div元素在整个网页内实现水平垂直居中效果，代码是最有说服力的，直接看代码。代码如下:
蚂蚁部落 body{ margin:0px; padding:0px; } #thediv{ width:100px; height:100px; background:green; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px;}
以上代码将div在网页中实现了全屏居中效果，下面简单介绍一下它的实现过程。一.实现原理:将div元素设置为绝对定位，然后设置它的left和right属性值分别为50%，这个时候div并没有居中，居中的是div的左上角，所以我们还需要再将其向上和向左拉动一定的距离即可，这个距离分别是高度和宽度的一半。二.相关阅读:1.绝对定位CSS的绝对定位一章节。2.margin负值可以参阅CSS的margin-right属性一章节。
***隐藏网址***
***隐藏网址***

css 里面怎么让一个DIV居中

第一种方式：设置body 居中。在CSS中的代码是（body{text-align:center;}）
第二种方式：用盒子模型，首先设置一个Div ，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下：
《div class="div1"》
《div class="div2"》《/div》
《/div》
CSS 样式代码：
《style type="text/css"》
.div1{text-align:center;width:100%;}
.div2{width:980px;background:red;} //为了看清效果，加了背景颜色
《/style》
第三种方式：margin：0 auto；

通常的方法为：先设置div的宽度，然后使用如下样式：

以下为示例：

• HTML代码中给出div

  123   《div class="outer"》    《div class="content"》《/div》《/div》   

• 添加样式

  1234567   /*外层边框*/div.outer{width:200px;height:150px;border:1px solid green;}div.content{    width:100px;height:50px; /*设置大小*/    margin:20px auto;        /*设置左右边距自动以使其居中*/    border:1px solid red;}   

• 显示效果

如何让一个div居中 CSS怎样让一个div居中

1、新建一个html文件，命名为test.html，用于讲解CSS怎样让一个div居中。

2、在test.html文件中，使用div标签创建一个模块，用于测试居中效果。

3、在test.html文件中，设置div的class属性为test，下面将通过该class属性设置其css样式。

4、在test.html文件内，编写《styletype=text/css》《/style》标签，页面的css样式将写在该标签内。

5、在css标签中，对div进行样式设置，使用width属性设置div的宽度为400px，使用height属性设置div的宽度为200px，使用background属性设置div的背景颜色为灰色。

6、在css标签中，使用margin属性对div的外边距进行设置，两边的外边距设置为auto，便可实现div居中效果。

7、在浏览器打开test.html文件，查看实现的效果。

CSS如何使DIV层居中_CSS/HTML

如何使DIV居中
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
如何使图片在DIV 中垂直居中
用背景的方法。举例：
***隐藏网址***
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"
效果如下：
如何使文本在DIV中垂直居中
如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
test content

说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

css如何实现图片在div中垂直居中

本文章主要介绍css如何实现图片在div中垂直居中问题，具有一定参考价值，希望能给大家提供帮助
平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做，今天我们来分享几种常用的css实现图片在div中垂直居中的代码
HTML代码
《div》
《img src="images/1.jpg"》
《/div》方法一
利用position和margin共同实现
通过给父元素设置绝对定位属性来让子元素相对于div定位
relative是保留原来的位置进行定位并且是相对于自己原来的位置进行定位
absolute 是脱离原来位置定位，是相对于最近的有定位的父级进行定位；如果没有有定位的父级元素，就相对于文档进行定位
注意：要使子元素的上下左右都为0，然后设置margin：auto就会自动垂直居中
代码如下
div{
width:200px;
height:200px;
border: 1px solid #ccc;
position: relative;//父元素设置绝对定位
}
img{
position: absolute;//相对定位
width:80px;
height:50px;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;//使其垂直居中
}效果图
方法二
利用display: table-cell;vertical-align: middle;text-align: center;三种属性实现
display:table-cell:会作为一个表格单元格显示（类似 《td》 和 《th》)
vertical-align: middle;设置垂直对齐方式，适用于行级元素
text-align: center：设置水平对其方式，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。
div{
width:200px;
height: 200px;
margin:300px auto;
display: table-cell;//作为一个表格单元格显示
vertical-align: middle;//设置垂直对齐方式
text-align: center;//设置水平对其方式
border:1px solid #ccc;
}
img {
width:80px;
height:50px;
}效果图
方法三
利用position,以及margin-top、margin-left实现
在本方法中要注意margin-top、margin-left值的设定，要设置为元素高度和宽度的一半，而且都要取负值
例如margin-top: -40px意思就是元素距离上边界向上40px，而margin-top: 40px的意思是距离上边界元素向下40px
div{
width:200px;
height:200px;
border: 1px solid #ccc;
position: relative;
}
img{
position: absolute;
width:80px;
height: 50px;
top:50%;
left:50%;
margin-top: -40px;//向上40px
margin-left: -25px;//向左25px
}效果图
总结：实现利用css将图片在div中垂直居中问题的方法有很多中，

CSS 一个DIV里面的文字如何上下左右居中显示

这样：

body{margin:0;padding:0;width:100%;

height:100%;

}div{position:absolute;top:50%;left:50%;margin-top:-250px; margin-left:-250px;/*此时宽和高都要固定*/width:500px;height:500px;}body{

margin:0;

padding:0;

width:100%;

height:100%;

}

div{

position:absolute;

top:50%;

left:50%;

margin-top:-250px;

margin-left:-250px;

/*此时宽和高都要固定*/

width:500px;

height:500px;

}

***隐藏网址***

扩展资料：

注意事项

一、用两个值就可以了

1、text-align:center;

//这是让文字左右居中

2、line-height:100px;

//这是让文字垂直居中

vertical-align:middle;

//这个属性不能让文字垂直居中，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

二、多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

1、父级元素高度不固定

父级高度不固定的时，高度只能通过内部文本来撑开。可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

《!--html代码--》

  《divid="div1"》

      这是多行文本垂直居中，

      这是多行文本垂直居中，

      这是多行文本垂直居中，

      这是多行文本垂直居中。

  《/div》

/*css代码*/

    #div1{

      width:300px;

      margin:50pxauto;

      border:1pxsolidred;

      text-align:center;/*设置文本水平居中*/

      padding:50px20px;

    }

2、父级元素高度固定

只对拥有valign特性的元素才生效，结合display:table;，可以使得div模拟table属性。因此可以设置父级div的display属性：display:table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle;。