本文通过实例代码给大家分享了 CSS 实现 div 居中的方法, 代码简单易懂, 非常不错, 具有参考借鉴价值, 需要的朋友参考下.
先创建两个 div 用来演示实现 div 在页面居中的效果.
- <!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;}
- </style>
- <div class="div1">
- <div class="div2">
- </div>
- </div>
- </body>
- </HTML>
(推荐学习: CSS 视频教程 https://www.html.cn/css/ )
一, 方法一
利用 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>
二, 方法二
利用 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>
三, 方法三
还是用 CSS 的 position 属性, 如下的 HTML
- <!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;margin:auto; top: 0;left: 0;right:
- 0;bottom: 0; }
- </style>
- <div class="div1 div11">
- <div class="div2 div22">
- </div>
- </div>
- </body>
- </HTML>
四, 方法四
利用 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>
这个方法还有一个好处就是, 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>
来源: http://www.css88.com/qa/css3/14921.html