div实现水平垂直居中CSS样式的8大方法

最新推荐文章于 2024-03-13 10:55:47 发布
最新推荐文章于 2024-03-13 10:55:47 发布
阅读量137 收藏
点赞数
分类专栏： 前端爬坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44178305/article/details/114603883
版权

div水平垂直居中的8大方法

  • 最近在找工作，为面试做准备，整理一下div水平垂直居中的实现方法。
  • 居中元素已知宽高适用
    • absolute + 负margin
    • absolute + margin auto
    • absolute + calc
  • 居中元素未知宽高
    • absolute + transform
    • line-height
    • css-table
    • flex
    • grid
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平垂直居中</title>
</head>
<style>
    /* 公共代码 */
    .wp {
        border: 1px solid red;
        width: 300px;
        height: 300px;
        position: relative;

        /* 第五个 line-height */
        /* line-height: 300px;
        text-align: center; 
        font-size: 0px; */

        /* 第六个 css-table*/
        /* display: table-cell;
        text-align: center;
        vertical-align: middle; */

        /* 第七个 弹性盒子 */
        /* display: flex;
        justify-content: center;
        align-items: center; */

        /* 第八个 gird */
         /* display: grid;  */
    }
    .box.size {
        width: 100px;
        height: 100px;
    }
    .box {
        background: green;
        /* 第一个  absolute + 负margin */
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px; 

        /* 第二个  absolute + margin auto */
        /* position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto; */

        /* 第三个 absolute + calc */
        /* position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px); */

        /* 第四个  absolute + transform*/
        /* position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */

        /* 第五个 line-height*/
        /* font-size: 16px;
        display: inline-block;
        vertical-align: middle;
        line-height: initial;
        text-align: left; */

        /* 第六个 css-table*/
        /* display: inline-block; */

        /* 第八个 gird */
        /* align-self: center;
        justify-self: center; */
    }
    /* 公共代码 */
</style>
<body>
    <div class="wp">
        <div class="box size">123123</div>
    </div>
</body>
</html>
我在人间贩卖青春
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV水平垂直居中css实现代码
09-25
总的来说，CSS提供了多种方法来实现`DIV`的水平垂直居中，包括绝对定位、Flexbox和CSS Grid。选择哪种方法取决于具体的需求和浏览器支持情况。对于现代项目，推荐使用Flexbox或CSS Grid，它们提供了更强大、更灵活的...
利用css样式实现表格中字体垂直居中的方法
01-21
利用css样式实现表格中字体垂直居中的方法，具体代码如下所示： 有一个自定义表格如下所示，当所返回数据改变时，文字都能自动居中  //html //用两个div做容器 <div class=grid-content1> <div class=subject...
css实现div垂直水平居中
WKY_CSDN的博客
05-11 2048
一、表格布局法 table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路：把这个元素的容器设置为table-cell，也就是具有表格单元格的特性，再使用vertical-align这个属性对block元素不起作用，但对table-cell元素是有效的)设置元素垂直居中，即可达到我们想要的效果。好处是不需要事先知道子元素的高度。 IE7及以下版本不支持此方法，IE8及以上版本及
css实现div水平垂直居中的几种方法
RWL1312898339的博客
03-07 503
在工作中或者面试中经常会碰到用css实现div水平垂直居中的问题，在这里小小的总结一下。 不知道div的宽高的情况下可以使用绝对定位(父元素需相对定位)和 transform 实现 知道div宽高的情况下可以使用绝对定位(父元素需相对定位)和margin实现 绝对定位下top left right bottom 都设置0配合margin:auto也可实现水平垂直居中 给父元素添加flex...
css div垂直水平居中实现
lvmengmeng
05-07 829
比如设置html中下面的div为垂直水平居中，则 div id="box">div> css样式 #box{ width: 300px; height: 200px; margin-left: -150px;//宽度的一半，很重要，不然不居中，会偏右 margin-top: -100px;//高度的一半 position:
CSS中实现div元素水平垂直居中
qq_45442879的博客
12-12 1050
CSS中实现div元素水平垂直居中
CSS 中div水平、垂直居中
weixin_52465551的博客
11-27 66
水平居中 margin: 0 auto; 垂直居中 position: relative; top: 50%; /*偏移*/ transform: translateY(-50%) 第二种方法： position: relative; top: 50%; /*偏移*/ margin-top: -150px;
CSS实现子元素div水平垂直居中的示例
01-21
css样式 1. 配合定位与margin：auto 父元素加相对定位，子元素加绝对定位 .main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; ...
IE6 div最小高度去除方法以及IE6div垂直居中css样式
12-13
本篇文章将探讨两个在IE6中常见的问题及其解决方案：去除div最小高度限制和实现div垂直居中。 首先，让我们解决IE6中的div最小高度问题。在IE6中，当尝试设置一个较小的高度（如3px）时，div的实际高度可能不会按照...
css三种方法实现div在浏览器水平居中
09-27
CSS，即层叠样式表，提供了多种方法来实现这一目标。以下是针对`div`元素的三种常见水平居中方法，每种方法都有其适用场景和优缺点。 **第一种方法：使用`margin: 0 auto`** 这种方法是最常用且兼容性最好的方式。...
CSS之div实现水平垂直居中
xYY_X_xYY的博客
04-28 177
以下我们将从实现子盒子在父盒子中水平垂直居中效果。 子盒子必须定宽高，绝对定位+margin；前提给父盒子设置相对定位。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .parent{ width: 500px; height: 500px; position: re.
css实现div的水平垂直居中方法
web_hua的博客
11-06 390
一、大家经常会遇到元素垂直居中问题，面试也是经常问的，所以现在总结几种常见的垂直居中的方法。 1、水平居中： div{ width:200px; margin:0 auto; } 2、使用绝对定位的万能居中： div { position:
盒子居中 方法
xtyxtyxtywq的博客
09-23 612
盒子居中 方法
CSS实现DIV的水平与垂直居中
pan_junbiao的博客
06-19 8912
使用CSS样式实现DIV的水平与垂直居中。 1、使用<div>标签的 align 属性实现水平居中 HTML中的 <div> 标签的 align 属性用于规定 div 元素中的内容的水平对齐方式。所有浏览器都支持 align 属性。 语法： <div align="value"> 属性值： 值 描述 left 左对齐内容。 ri...
让div水平居中的css方法
聆听。。花开雨落的博客
08-20 5692
1、给要设置水平居中的div设置display:block ,margin:0 auto，width , height4个属性，可以让块级元素水平居中(默认情况下，div的position:static)其中left:50% position:的值除了static之外的都可以 marin-left:的值为负数，数值大小为width的一半。三、让div同时水平竖直居中的方法。
div水平并垂直居中五种方式
最新发布
2301_82323176的博客
03-13 796
第二种：父元素relative,子元素absolute,left为50%,top为50%，再给margin-left负你子盒子自身/2,和margin-top:负你盒子自身/2。第三种：父元素relative,子元素absolute,left给50%,top给50%，再给盒子 transform:translate3d(-50%,-50%,0);第一种：父级元素relative，子元素absolute,并且left,right,bottom,top,设置为0，margin:auto,就可以水平垂直居中。
css基础~如何使div内的内容垂直水平居中
路漫漫其修远兮
11-14 195
目录 1.前言 2.解决方法（flex布局） 1.前言 参考：https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10407830.html上面这篇文章中记录了6中方法大家可自行参考。 2.解决方法（flex布局） 该方法主要是通过在div上添加下面三个css属性，这样div就实现了垂直水平居中。 .sxzyjv{ ...
div 悬浮层水平垂直居中
qq_29384639的博客
01-14 369
.edittool { position: absolute; top: 50%; left: 50%; color: #ffffff; margin-left: -135px; margin-top: -45px; }
css实现垂直水平居中的六种方法
weixin_67720880的博客
04-20 5589
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。vertical-align 属性设置一个元素的垂直对齐方式。
divcss样式垂直居中
07-21
要将一个 `<div>` 元素垂直居中，可以使用以下 CSS 样式： ```css .div-center { display: flex; justify-content: center; align-items: center; } ``` 将上述样式应用于你的 `<div>` 元素，例如： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值