div中的div上下居中

方法1：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

.parent {

          width:800px;

          height:500px;

          border:2px solid #000;

          position:relative;

}

 .child {

            width:200px;

            height:200px;

            margin: auto;  

            position: absolute;  

            top: 0; left: 0; bottom: 0; right: 0; 

            background-color: red;

}

方法2：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            display:table-cell;

            vertical-align:middle;

            text-align: center;

        }

        .child {

            width:200px;

            height:200px;

            display:inline-block;

            background-color: red;

        }

方法3：


1

2

3

4

5

6

7

8

9

10

11

12

13

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            display:flex;

            justify-content:center;

            align-items:center;

        }

        .child {

            width:200px;

            height:200px;

            background-color: red;

        }

方法4：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            position:relative;

        }

        .child {

            width:300px;

            height:200px;

            margin:auto;

            position:absolute;/*设定水平和垂直偏移父元素的50%，

再根据实际长度将子元素上左挪回一半大小*/

            left:50%;

            top:50%;

            margin-left: -150px;

            margin-top:-100px;

            background-color: red;

        }

原文地址：https://www.cnblogs.com/bydzhangxiaowei/p/9073517.html

时间： 2024-07-29 18:47:39

div中的div上下居中的相关文章

设置div中的div居中显示

设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> style样式: .big{ height:200px; width:200px; border:black solid 1px; position:absolute; left:150px; } .small{ height:100px; width:100px; background-color:green

div中的div如何居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> </style> </head> <body> <div class="father"> <div class="

div中嵌套div水平垂直居中

div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: 1 <div align="center" style="width: 200px;height: 200px;background: green;display: table-cell;vertical-align: middle;"> 2 <div style=" width: 100px;height: 100px;background: blue;&qu

div中嵌套div速度将会同样很慢

---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div+css的形式做出的网站也没见他们做过什么优化,甚至连文章都没更新过.这是外话,我们就来谈谈难道真的用div+css制作出来的网站就打开速度就快,对搜索引擎就友好吗?关于div+css的优点其实确实很多,这种布局方式大大精简了页面的代码量,减少了网页的体积,有利于网页的读取.而table的排版方式最

如何让Div中的Table居中

有时候在Div中加上 <div style="text-align:center"></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto比如: <div style="text-align:center">                                            <table border="1" cellpadding="3&

css div中内容绝对居中（多行内容）

div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title>绝对居中 </title> <style type="text/css"> h1, h2, h3, h4, h5 { margin:0px; padding:0px; } .panel { width:300px; height:150px; background

ExtJS如何取出某个DIV中的内容

在使用ExtJS的时候,不免我们要在某个DIV中取出DIV的内容,因此通过查找api和相关资料应该向如下方式进行取值 1 Ext.onReady(function(){ 2 var panel = new Ext.Panel({ 3 title:'Ext.core.domhelper.applystyles示例', 4 width:300, 5 height:200, 6 renderTo:'sub1', 7 html:"<div id='div1' style='height:160px

图片宽度和高度都大于div,实现图片在div中居中

<style type="text/css"> #out{height:100px; width:150px; position:relative; overflow:hidden;} #mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;} #in{ position:relative; top:-50%;} </style>

img在div中居中的问题

Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中:(有的设计师为图片再加个div标签,然后通过div标签的margin实现居中). 如果图片在div中下的span属性中,必须转换成display:block:然后padding-top:10px.