div水平居中垂直,div的垂直居中

div水平居中垂直,div的垂直居中。让div在另贰个div中居中,让divdiv居中

{margin:0 auto;}

 

{margin:0
auto;}…

基础知识:div在另四个div里 垂直居中,div居中

div水平居中垂直,div的垂直居中。方法一:

.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;
}

方法二:

  .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;
         }

方法三:

 .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;
        }

方法四:

 .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;
        }

 

垂直居中,div居中
方法一: .parent { width : 800px ; height : 500px ; border : 2px solid
#000 ; position : relative ; } .child { wid…

div水平居中 垂直居中,div水平居中垂直

水平居中

皇家赌场手机版 1

方案一:

使用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 http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
    body{margin:0;padding: 10px;}
    .wrap{width: 600px;height: 400px;position: absolute;border:1px solid #333;}
    .box{position: relative;margin:0 auto;width:300px;height:150px;background-color: #999;text-align: center;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="box">hello</div>
    </div>
</body>
</html> 

方案二:

使用:

left:50%;top:50%;margin-left:-width/2;margin-top:-height/2; 

皇家赌场手机版,恒定八分之四后,再负边距左移和发展。到达水平和垂直方向居中效果

皇家赌场手机版 2

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
    body{margin:0;padding: 10px;}
    .wrap{width: 600px;height: 400px;position: absolute;border:1px solid #333;}
    .box{position: absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;width:300px;height:150px;background-color: #999;text-align: center;}
</style>
</head>
<body>
    <div class="wrap">
        <div class="box">hello</div>
    </div>
</body>
</html> 

tip:若想垂直居中,margin:auto auto 那样回顾的装置是极度的..

垂直居中,div水平居中垂直 水平居中
方案一: 使用margin:0 auto ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “…

div的垂直居中,div垂直居中

从前从来不会笔直居中,看了一篇作品才知晓  原地点 不详了..

 1 .diva{
 2       width:300px;
 3       height:300px;
 4       background-color:green;
 5       position:absolute;
 6       top:0;
 7       right:0;
 8       bottom:0;
 9       left:0;
10       margin:auto;
11 }
12 这是一种垂直居中的方式。
13 
14 第二种兼容比较好
15 
16 .divb{
17       width:300px;
18       height:300px;
19       background-color:red;
20       position:absolute;
21       top:50%;
22       right:0;
23       left:0;
24       margin:auto;
25       margin-top:-150px;//一半的高度
26 }

首先次写博客 不佳之处大家见谅 有更加好的点子或许失实款待提议。

在此之前一向不会笔直居中,看了一篇小说才了解 原地址 不详了.. 1 .diva { 2
width : 300px ; 3 height : 300px ; 4 background-…

Leave a Comment.