css怎么设置div居中?

css设置div居中的方法

1、利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30

div1的高减去div2的高就是div2margin-top的数值:(100-40)/2=30

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}
 
            .div22{
                margin-left: 30px;margin-top: 30px;
            }
        </style>
        <div class="div1">
            <div class="div2 div22">
            </div>
        </div>
    </body>
</html>

效果如下:

1.jpg

2、利用css的 position属性,把div2相对于div1的top、left都设置为50%,然后再用margin-top设置为div2的高度的负一半拉回来,用marg-left设置为宽度的负一半拉回来,css如下设置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}
            .div11{
                position: relative;
            }
            .div22{
                position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
            }
        </style>
        <div class="div1 div11">
            <div class="div2 div22">
            </div>
        </div>
    </body>
</html>

效果如下:

2.jpg

3、利用css3的新增属性table-cell

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; height: 40px; background-color: green;}
            .div11{
                display: table-cell;vertical-align: middle;
            }
            .div22{
                margin: auto;
            }
        </style>
        <div class="div1 div11">
            <div class="div2 div22">
            </div>
        </div>
    </body>
</html>

效果如下:

4.jpg

这个方法还有一个好处就是,div2的高度可以不固定,如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;} 
            .div2{ width:40px ; background-color: green;}
            .div11{
                display: table-cell;vertical-align: middle;
            }
            .div22{
                margin: auto;
            }
        </style>
        <div class="div1 div11">
            <div class="div2 div22">
               div居中方法
            </div>
        </div>
    </body>
</html>

1.png

Image placeholder
前端答疑
未设置
  43人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css怎么设置div不随滚动条移动?

css怎么设置div不随滚动条移动?把一个内容固定到某一个位置,相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位position通常有absolute绝对定位,relative相对定

如何不写css使div居中显示

如何不写css使div居中显示不使用css使div居中显示,可以使用标签,对其所包括的文本进行水平居中。html代码如下: 这是div 效果:(相关课程推荐:css视频教程)标签说明HT

css文字水平垂直居中怎么设置?

1、文字水平居中在CSS中想要让文字水平居中,可以使用text-align:center;。text-align是一个基本的属性,它会影响一个元素中的文本行互相间的对齐方式。值left、right和c

css使用float怎么居中?

css使用float怎么居中?css并没有float:center,但是实现水平居中浮动是可以实现的。以下面的Li列表为例,我们要实现中间LI的居中浮动: 列表一 列表二 列表三 我们需要先了解下

css定位怎么实现居中?

css定位怎么实现居中?使用绝对定位absolute是一种常用、兼容性很好的方式。.element{ width:600px;height:400px; position:absolute; left

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复。属性值:repeat:即默认方式,完全平铺背景;no-repeat:在X及Y轴方向均不平铺;

dreamweaver中CSS怎么设置

dreamweaver中CSS怎么设置1、打开软件后,我们可以直接按下快捷键【Ctrl+J】2、或者,我们点击菜单栏的修改命令按钮。3、然后,我们点击页面属性按钮。4、接下来我们就会看到页面属性这个窗

css怎么设置粘性定位?

css怎么设置粘性定位?粘性定位的设置方法是给元素添加position:sticky;,sticky是css定位新增属性,类似static(没有定位)和固定定位fixed的结合。它主要用在对scrol

css怎么设置字体为宋体?

css怎么设置字体为宋体?css设置字体使用font-family属性,设置为宋体,可以使用font-family:宋体;,或者font-family:SimSun;。font-family:规定元素

css设置div滚动条内容不超过就不显示

css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示滚

css怎么写在html中?

css怎么写在html中?css样式写法可以分为:●内嵌式●内部样式表●外部样式表HTML中直接写css只能使用内嵌式和内部样式表。(相关课程推荐:css视频教程)一、内嵌式将css代码写在HTML元

jquery怎么设置checkbox不选中?

jquery怎么设置checkbox不选中?jquery对checkbox进行操作需要使用prop()方法。1、设置不选中:$("#my-checkbox").prop("checked",false

css如何设置元素水平垂直居中显示

课程推荐:PHP开发工程师--学习猿地精品课程 首先我们来介绍以下两个属性: 1、text-align是设置元素中文字的水平对齐方式。 它的作用对象是文本,控制文本,对块状元素等不起效果,只能让块元素

echarts怎么引入到vue中?

准备工作:首先我们初始化一个vue项目,执行vueinitwebpackechart。接着我们进入初始化的项目下,安装echarts,npminstallecharts-S //或 cnpminsta

axios怎么引入到vue中?

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。在vue项目之中使用axios是一个非常明智的选择,因为vue官方已经宣称不再维护vue-resource,并且推荐使

css图片后的文字无法居中对齐怎么解决?

比如说,现在我要做一个简单的删除按钮,只由一个icon和“删除”两个字组成,你会如何布局,给你30秒时间考虑。好,先亮出HTML代码如下:删除很简单,就是一个class为del的div元素下有两个sp

css段落间怎么设置距离?

1、使用line-height属性设置line-height属性设置行间的距离(行高)。不允许使用负值。line-height属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最

css中怎么设置没有内容时高度为0

css中怎么设置没有内容时高度为0默认情况下HTML元素没有内容时,高度就是0,不需要手动设置。但这时有些元素仍然具有margin属性,这会对其他元素造成影响,如p标签。(相关课程推荐:css视频教程

css中怎么设置图片大小?

css中怎么设置图片大小?语法:img{ width:150px; height:60px; }注:这里设置CSS宽度为150px,css高度为60px,CSS样式中width和height的值都单位

css水平垂直居中有几种实现方式?

css水平垂直居中有几种实现方式?1、水平对齐+行高【思路一】text-align+line-height实现单行文本水平垂直居中 .f10.test{ text-align:center; line

nginx不能访问css怎么办

nginx不能访问css怎么办在Nginx配置文件nginx.conf中内添加location~.*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|wof

css怎么画三角形?

css怎么画三角形?三角形实现原理:宽度width为0;height为0;方法:设置div长宽为0,只用边框宽填充,三角形的底部边框设置颜色,剩下的三边用透明边框设置即可。使用border属性即可设置

css怎么去除定位?

如果没有指定元素的position属性值,也就是默认情况下,元素也是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保

css怎么定位?

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默

css怎么让字体不换行?

在css中,可以使用white-space属性来强制文字字体不换行;通常我们使用white-space:nowrap来强制文本文字内容不换行,文本会在在同一行上显示,直到遇到标签为止。示例: