6种CSS控制元素上下居中效果

最新推荐文章于 2024-04-15 08:36:48 发布

涂作权的博客

最新推荐文章于 2024-04-15 08:36:48 发布

阅读量1.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/tototuzuoquan/article/details/8262124

版权

前端专栏收录该内容

49 篇文章 1 订阅

订阅专栏

通常我们用到的css布局都是左右居中，经典css写法如下：

body{

margin:0;

padding:0;

width:100%;

height:100%;

}

div{

margin:0 auto;

width:500px;

heigth:auto;

}

上面是经典的左右居中的css写法，那么像登录框那些比较小得div块只是左右居中是否不是太美观，如果上下左右都居中这是

大多数网站的做法，下面是一个比较经典的div上下左右居中的css写法：

body{

margin:0;

padding:0;

width:100%;

height:100%;

}

div{

position:absolute;

top:50%;

left:50%;

margin-top:-250px;

margin-left:-250px;

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

width:500px;

heigth:500px;

}

上面的margin可以合并：margin:-250px 0 0 -250px;

大概原理就是：布局需用position，绝对布局absolute还是相对布局relative得看父容器，top，left相对于顶部和左部都相距整个容器的50%，然后在利用margin，向上回退div高的50%即：margin-top:-250px

向左回退div宽的50%即：margin-left:-250px

好了大功告成。

内部元素不固定大小的情况：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

第3中方式

<body>

<div style="width:400px; height:400px; background:#99FF00;">
  <div style="width:100px; height:100px; position:relative; top:50%; left:50%; margin-left:-50px; background:#FF0000;">
   <div style="position:relative; margin-top:-50%; background:#CC9900;">
    asdfasdf;ajdslkas
    <br/>
    asfasdfas
   </div>
  </div>
</div>
</body>
</html>

第4中方式：

第5种

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{
  margin:0px;
}
#container{
  position:absolute;
  width:100%;
  background-color:#808080;
  top:20%;
  bottom:20%;
  lex:expression(this.style.height=parseInt(document.body.clientHeight)-this.style.pixelTop*2);
}
</style>
</head>