html-定位实现盒子的水平绝对居中的3种方式--小技巧

最新推荐文章于 2023-08-13 16:47:55 发布

JackieDYH

最新推荐文章于 2023-08-13 16:47:55 发布

阅读量5k

点赞数 6

分类专栏：编码小技巧文章标签：水平绝对居中 html实现盒子居中

本文链接：https://blog.csdn.net/JackieDYH/article/details/104390871

版权

编码小技巧专栏收录该内容

65 篇文章 0 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

方法一：margin负间距

必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
距离定位父级左边框和上边框的距离设置为50%；
将元素分别左移和上移，移动元素宽度和高度的一半

方法二：margin: auto；实现绝对定位元素的居中

必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
分别设置left: 0; right: 0; top: 0; bottom: 0;
为居中盒设置margin: auto;

方法三：transform: translate();实现绝对定位元素的居中

    .box{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

实现代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            heigh

了解本专栏

超级会员免费看

JackieDYH

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
html-定位实现盒子的水平绝对居中的3种方式--小技巧

方法一：margin负间距必须知道居中盒的宽度和高度；为居中盒设置绝对定位；距离定位父级左边框和上边框的距离设置为50%；将元素分别左移和上移，移动元素宽度和高度的一半方法二：margin: auto；实现绝对定位元素的居中必须知道居中盒的宽度和高度；为居中盒设置绝对定位；分别设置left: 0; right: 0; top: 0; bottom: 0;为居中盒设置ma...
复制链接

扫一扫