精华内容
下载资源
问答
  • div居中和div内容居中

    万次阅读 多人点赞 2018-08-27 23:44:46
    一、div自身居中: 使用margin:0 auto 上下为0,左右自适应的css样式。 要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:...

    一、div自身居中:

    使用margin:0 auto
    上下为0,左右自适应的css样式。

    要让div水平居中,那么除了设置css margin:0 auto外,还不能再设置float,不然将会导致div靠左(设置float:left)和div靠右(设置float:right)。

    1、div布局居中实例代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div布局居中实例 thinkcss</title>
    <style>
    #jz{ margin:0 auto; width:320px; height:100px; border:1px solid #F00}
    </style>
    </head>
    <body>
    <div id="jz">设置margin:0 auto兼容各大浏览器让div水平居中</div>
    </body>
    </html>

    2、截图
    这里写图片描述
    div盒子水平居中截图

    以上实例正是使用margin:0 auto让div兼容各大浏览器的水平居中。

    二、div内的内容居中:

    内容居中分为div内容水平居中与div内容垂直居中。

    div内容水平居中相比布局div居中,而div内容居中比较简单,只需要设置一个内容居中css(text-align:center)、内容垂直居中(line-height)即可。

    1、div内容水平居中CSS:
    text-align:center
    无论是p还是div都可以对其设置此CSS实现对应对象内的内容水平居中。

    2、div内容垂直居中 行高属性:
    line-height
    要让div内只有一行的内容垂直居中,通常对div设置的height(高)与line-height(行高)相同,即可实现div内容垂直居中。

    3、div内容水平居中与垂直居中实例代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>div内容居中实例 thinkcss</title>
    <style>
    #juzhong{width:320px;height:100px; line-height:100px; text-align:center; border:1px solid #F00}
    </style>
    </head>
    <body>
    <div id="juzhong">text-align和line-height设置水平与垂直居中</div>
    </body>
    </html>

    4、截图
    这里写图片描述
    div内容水平居中与div内容垂直居中布局实例

    从上图可以看见div内容实现两者情况下居中,但没有设置margin:0 auto而div没有水平居中。

    可以实例下再将以上代码拷贝后,加入DIV布局居中代码试试实现DIV的居中。

    展开全文
  • 设置div内容居中

    千次阅读 2018-04-11 21:48:59
    如果是,那么我们可以采用以下两种方式:(1)div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0;这里(2)让left和top都是50%,这在水平方向上让div的最左与屏幕的.....

         最近实习,就把前端里的一些方式做个笔记,方便大家一起交流学习。首先,我们要先明确自己是不是使用了绝对定位:position:absolute; 如果是,那么我们可以采用以下两种方式:

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

    (2)让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,就可达到居中效果了。

    eg:(main包含div cotent)

    .main{
    position: absolute;
    margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80%;
    width:  80%;
    background-color: lightskyblue;
    }


    .cotent{
    position: absolute;
    margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    /*margin: 0 auto;*/
        height: 440px;

       width: 870px;

    background-color: lightskyblue;

    }

    更多的可以参考:https://segmentfault.com/a/1190000002436755


    展开全文
  • html中div内容居中的方法

    万次阅读 2017-03-27 09:46:30
    方法1:table-celldiv中的内容居中:不改变盒子尺寸。<!DOCTYPE html> <title>Title div { background-color: red; widt

    一、div内容 居中的方法:

    方法1:table-cell

    div中的内容居中:不改变盒子尺寸。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: red;
                width: 300px;
                height: 300px;
    
                /*此元素会作为一个表格单元格显示
                (类似 <td> 和 <th>)*/
                display: table-cell;
                /*垂直居中 */
                vertical-align: middle;
                /*水平居中*/
                text-align: center;
            }
        </style>
    </head>
    
    <body>
    <div>
        <!--<span>垂直居中</span>-->
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
    </div>
    </body>
    </html>

    方法2:display:flex

    div中的内容居中:不改变盒子尺寸

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: red;
                width: 300px;
                height: 300px;
    
                display: flex; /**/
                justify-content: center; /*水平居中*/
                align-items: Center; /*垂直居中*/
            }
        </style>
    </head>
    
    <body>
    <div>
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
        <!--<span>垂直居中</span>-->
    </div>
    </body>
    </html>

    方法3:绝对定位和负边距

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: red;
                width: 300px;
                height: 300px;
    
                position: relative;
            }
    
            img {
                position: absolute;
                width: 150px;
                height: 100px;
                /*img左上角移动到html的中心*/
                top: 50%;
                left: 50%;
                /*img左上角向左上角分别移动自身的一半距离*/
                margin-left: -75px;
                margin-top: -50px;
                /*text-align: center;*/
            }
        </style>
    </head>
    <body>
    <div>
        <img src="../share_icon_sina_weibo.png"/>
        <!--<span>垂直居中</span>-->
    </div>
    </body>
    </html>

    方法4:绝对定位和0

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: red;
                width: 300px;
                height: 300px;
    
                position: relative;
            }
    
            img {
                /*width: 50%;*/
                /*height: 50%;*/
                overflow: auto;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }
        </style>
    </head>
    <body>
    <div>
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
        <!--<span>垂直居中</span>-->
    </div>
    </body>
    </html>

    这种方法跟上面的有些类似,但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中,很神奇吧。不过这里得确定内部元素的高度,可以用百分比,比较适合移动端。

    方法5:translate

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: red;
                width: 300px;
                height: 300px;
    
                position: relative;
            }
    
            img {
                position: absolute;
                width: 150px;
                height: 100px;
                /*img左上角移动到html的中心*/
                top: 50%;
                left: 50%;
                /*img左上角向左上角分别移动自身的一半距离*/
                transform: translate(-50%, -50%);
                /*text-align: center;*/
            }
        </style>
    </head>
    <body>
    <div>
        <img src="../share_icon_sina_weibo.png"/>
        <!--<span>垂直居中</span>-->
    </div>
    </body>
    </html>
    

    这实际上是方法3的变形,移位是通过translate来实现的。

    方法六:display:inline-block

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: red;
                width: 300px;
                height: 300px;
    
                text-align: center;
                font-size: 0;
            }
    
            div:after {
                content: '';
                width: 0;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }
    
            img {
                vertical-align: middle;
                display: inline-block;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
    <div>
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
        <!--<span>垂直居中</span>-->
    </div>
    </body>
    </html>

    这种方法确实巧妙…通过:after来占位。

    方法七:display:flex和margin:auto

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: red;
                width: 300px;
                height: 300px;
    
                display: flex;
                 /*text-align: center;*/
            }
    
            img {
                margin: auto;
            }
        </style>
    </head>
    <body>
    <div>
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
        <!--<span>垂直居中</span>-->
    </div>
    </body>
    </html>

    方法八:display:-webkit-box

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div {
                background-color: red;
                width: 300px;
                height: 300px;
    
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;
                -webkit-box-orient: vertical;
                text-align: center
            }
    
        </style>
    </head>
    <body>
    <div>
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
        <!--<span>垂直居中</span>-->
    </div>
    </body>
    </html>

    效果图:

    Markdown

    参考:

    纯CSS实现垂直居中的几种方法

    如何让一个div居于页面正中间【实现方法】

    注意:

    以上不会改变div的尺寸:
    以下使用padding会改变div的尺寸:

    方法一

    利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。

    <!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 name="author" type="Nancle from CAU CS101"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>如何让img标签在div里左右上下居中</title>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #container1 {
                /*  300*150*/
                width: 300px;
                height: 150px;
                background-color: cyan;
                /*水平居中*/
                text-align: center;
            }
    
            #container2 {
                /*  300*150*/
                width: 300px;
                height: 150px;
                background-color: cyan;
                /*水平居中*/
                text-align: center;
                /*垂直居中*/
                padding-top: 50px; /*div高度-img高度*/
            }
        </style>
    </head>
    <body>
    <!--300*150-->
    <div id="container1"><!--150*100-->
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
    </div>
    <br>
    <br>
    <br>
    <!--300*150-->
    <div id="container2"><!--150*100-->
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
    </div>
    </body>
    </html> 

    方法二:

    只用padding属性,通过计算求得居中

    <!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 name="author" type="Nancle from CAU CS101"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>如何让img标签在div里左右上下居中</title>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #container {
                /*  300*150*/
                width: 300px;
                height: 150px;
                background-color: cyan;
            }
    
            #container1 {
                /*  300*150*/
                width: 300px;
                height: 150px;
                background-color: cyan;
                /*水平居中*/
                padding-left: 150px; /*div宽度-img宽度*/
            }
    
            #container2 {
                /*  300*150*/
                width: 300px;
                height: 150px;
                background-color: cyan;
                /*水平居中*/
                padding-left: 150px; /*div宽度-img宽度*/
                /*垂直居中*/
                padding-top: 50px; /*div高度-img高度*/
            }
        </style>
    </head>
    <body>
    <div id="container"><!--150*100-->
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
    </div>
    <br/>
    <br/>
    <br/>
    <div id="container1"><!--150*100-->
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
    </div>
    <br/>
    <br/>
    <br/>
    <div id="container2"><!--150*100-->
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
    </div>
    <p>
    </p>
    </body>
    </html> 

    方法三:

    利用图片的margin属性将图片水平居中,利用DIV的padding属性将图片垂直居中。

    Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中。

    <!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 name="author" type="Nancle from CAU CS101"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>如何让img标签在div里左右上下居中</title>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            .div1 {
                /*  300*150*/
                width: 300px;
                height: 150px;
                background-color: cyan;
                /*垂直居中*/
                padding-top: 50px;
            }
    
            /* Img是内联元素,要设置其margin属性使其居中,
            就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中*/
            img {
                /*background-color: red;*/
                display: block;
                /*水平居中*/
                margin: 0 auto;
            }
        </style>
    </head>
    
    <body>
    <div class="div1">
        <img src="../share_icon_sina_weibo.png" width="150" height="100"/>
    </div>
    </body>
    </html> 

    参考:

    如何让图片在div中居中显示?

    二、div盒子 居中的方法:

    方法一:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>div居于页面正中间</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                background-color: #EAEAEA;
            }
    
            div {
                width: 200px;
                height: 200px;
                background-color: #1E90FF;
                /*--------------------------文字居中方法--------------------------*/
                text-align: center; /*水平居中*/
                line-height: 200px; /*垂直居中:div的全高度*/
    
                /*--------------------------div居中方法--------------------------*/
                /*使div脱离文档流*/
                position: absolute;
                /*左上角位置*/
                top: 50%; /*div下移父容器的一半高度*/
                left: 50%; /*div右移父容器的一半宽度*/
                /*中心矫正:上移div自身一半高度,左移div自身一半宽度*/
                -webkit-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    
    </head>
    
    <body>
    <div>
        我在中间
        <!--<img src="../share_icon_sina_weibo.png" width="150" height="100"/>-->
    </div>
    <!--
    使文字处于div中心方法:
    先设置一个div的宽高,使用text-align水平居中;
    再使用line-height上下居中即可(line-height设置的高度需跟div的高度一致)
    -->
    </body>
    
    </html>
    

    方法二:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>div居中方法</title>
        <style>
            /*先要设置div元素的祖先元素html和body的高度为100%(因为他们默认是为0的),
            并且清除默认样式,即把margin和padding设置为0(如果不清除默认样式的话,浏览器就会出现滚动条*/
            html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
    
            div {
                width: 300px;
                height: 300px;
                background: orange;
                position: relative; /*相对父容器*/
                /*-----------------------div居中-----------------------*/
                /*水平居中*/
                margin: 0 auto; /*水平居中*/
                /*垂直居中*/
                top: 50%; /*垂直偏移:父元素的一半高度*/
                margin-top: -150px; /*垂直矫正:上移自身一半高度*/
                /*---------------------文字居div中间----------------------*/
                text-align: center;
                line-height: 300px;
            }
        </style>
    </head>
    
    <body>
    <div>我在中间</div>
    </body>
    </html>
    展开全文
  • flex布局实现div内容居中

    千次阅读 2018-12-24 15:17:35
    div class="list-col-detail"&gt;1002&lt;/div&gt; .list-col-detail{ width: 180px; height: 78px; display: flex; align-items: center; justify-content: center; background: #ff...
    <div class="list-col-detail">1002</div>
    .list-col-detail{
    	width: 180px;
    	height: 78px;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	background: #ff0000;
    			
    }

    展开全文
  • 该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
  • 有时我们会有这样的需求就是让div整体居中内容居中,下面有个不错的示例,大家可以参考下
  • div中多行文字垂直居中
  • 主要介绍了浮动的div自适应居中显示的js代码,有需要的朋友可以参考一下
  • bootstrap的div内容垂直水平居中显示

    千次阅读 2020-12-14 11:08:47
    主要为了实现span在div中垂直居中 下面代码 <div class="col-md-4 bg-danger"> <div style="display: flex; flex-direction: column; justify-content: center; text-align: center; height: 100%">...
  • 用flex将内容div居中

    千次阅读 2019-01-22 11:07:36
    <!... <title></title> ...支持将任意的元素标签、、居中显示 flex-direction: column; justify-content: center; align-items: center; //这三个样式标签自己体验下就知道有什么作用  
  • div内容垂直居中对齐

    千次阅读 2016-03-25 02:44:30
    css垂直居中属性设置vertical-align: middle对div不起作用,例如: DIV垂直居中对齐 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body {text-align: center; vertical-...
  • css中div中的内容居中

    万次阅读 2017-09-05 22:17:27
    第一种使用table标签(很少用)css代码/* 使用table包裹要居中的元素,因为table有自适应的设置 ... 这个内容是使用table自动居中的1 这个内容是使用table自动居中的2 这个内容是使用tabl
  • html div 内部居中

    万次阅读 2018-07-20 17:46:18
    margin 控制控件本身和外部的距离。 假如div 里有个table. ...要设置table居中,首先div 中。text-aligh = 'center'。然后table中设置margin-left:auto;margin-right:auto;这样就可以了。 我是这么设置的。 ...
  • 今天总结下几种div中的内容水平居中的几种方法,至于好坏我还不是很清楚,就不阐述,希望有大佬能指示下,小弟不胜感激 1.首先是常规的 margin属性,上下固定,左右自适应 <style> .div5{ width: 200...
  • 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?... 相关教程:div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要
  • 不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一、margin:auto 0 与 text-aligh:center 在现代浏览器(如Internet Explorer 7、Firefox、Opera等)现代浏览器实现...
  • 主要介绍了Jsp中如何让图片在div居中的小技巧,需要的朋友可以参考下
  • div居中显示

    2018-05-21 11:12:51
    介绍两种使div居中显示的方式,一种是通过CSS样式控制,一种是通过JavaScript计算得出。基本布局:样式: .contain{ width: 300px; height: 300px; border: 2px solid #000; position: relative; } .box{ ...
  • 所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像<div>、这样的元素是没有valign特性的,因此使用vertical-align对...
  • DIV和SPAN如何垂直居中对齐,水平居中很简单,设置text-align:center就可以了,垂直居中一直很是疑惑,下面为大家解惑
  • 下面小编就为大家带来一篇解决img在div居中的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如: p { padding : 20px 0 ; } 这段代码的效果和line-height法差不多。 三、模拟...
  • css 文本和div垂直居中方法汇总

    万次阅读 多人点赞 2016-07-04 14:10:07
    本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。
  • div水平居中的方法

    2018-06-13 10:34:45
    CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
  • 主要介绍了使用css实现的div水平、垂直居中并且兼容chrome、ie8,具体示例如下,需要的朋友可以参考下
  • 复制代码代码如下: div { position:absolute; width:500px; height:260px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000; } 文字居中:text-align:center; height:22px;line-height:22px;...
  • div内容居中显示

    千次阅读 2010-09-17 06:13:00
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 多行文字实现垂直居中 </title> ;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 106,309
精华内容 42,523
关键字:

div内容居中