写html碰到怎样让div控件内的元素在页面保持居中，现记录下来

　　html代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>photo居中</title>
 7     <link rel="stylesheet" href="../css/photo_01.css">
 8 </head>
 9 <body>
10     <div>
11         <img src="../images/dl.jpg" id="myStyle">
12     </div>
13 </body>
14 </html>

　　css代码如下:

 1 #myStyle{
 2     height: 92px;
 3     width: 137.5px;
 4     border: 4px solid rosybrown;
 5     position: absolute;
 6     /* 下面两条保证div左上角那一点处于正中间 */
 7     top: 50%;
 8     left: 50%;
 9     /* 如果想要让div元素居中，那么要使用偏移量，向左偏移50%，向上偏移50% */
10     transform: translate(-50%,-50%);
11     /* 精确计算并不能一定保证在页面正中间 */
12     /* margin: -46px 0 0 -68.75px; */
13 }
14 body{
15     background-image: url(../images/map.jpg);
16     background-attachment: fixed;
17     background-repeat: no-repeat;
18     background-position: center center;
19 }

　　使用绝对路径对div的内容进行修改，如果仅使用top:50%和left:50%，那么效果是下面这样的（仅展示原理，因此与上面实际样式存在着一些差异）：

　　做出的效果只是让div内的元素左上角保持页面居中，这一点也可以从css代码中理解：top,left分别保持50%，即在与页面上边距和左边距都保持一半的距离

　　如果想让div内的元素在页面的正中央显示，很容易想到，将div内的元素往左上角移动div元素分别一半的宽度即可，但实际应用中你的div元素的宽度的一半不见得正好是整数，很有可能结果是一位小数，甚至两位小数，因此使用了transform属性中的translate，二维坐标下可以这样使用：

1 div{
2     width:xx;
3     height:xx;
4     position:absolute;
5     left:xx;
6     top:xx;
7     transform:translate(x,y);
8 }

　　其中translate(x,y）x和y分别表示在左上(left和top)两个方向上的缩放（用百分比做度量单位）或者两个方向上的移动（用像素做度量单位），现在想做出来的效果是让div内的元素在页面居中，那么使用百分数进行缩放即可，代码如下：

1 div{
2     ...;
3     transform:translate(50%,50%);
4     ...;
5 }

注：如果是div内的元素移动到页面正中心的距离（即偏移量）是整数也可以使用margin属性，格式如下：

1 div{
2     ...;
3     margin: (x, 0, 0, y);
4     ...;
5 }

　　括号内的四个值分别表示上右下左（即顺时针方向，从12点指向开始），其中x和y的值分别为高度的一半和长度的一半，但在填入的时候要加“-”号（反方向移动）。但并不推荐这样做，毕竟大多数情况下偏移量不是整数。

posted @ 2020-09-26 20:21  TomatoMan  阅读(137)  评论(0)    收藏  举报