实现多少种水平垂直居中的布局（定宽高和不定宽高）

最新推荐文章于 2022-11-03 22:54:50 发布
最新推荐文章于 2022-11-03 22:54:50 发布
阅读量217 收藏
点赞数
分类专栏： web
原文链接：https://juejin.im/post/5db706d5f265da4d31073959
版权

1、定宽高

一、绝对定位和负magin值

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px; 
}
</style>

二、绝对定位 + transform

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); 
}
</style>

三、绝对定位 + left/right/bottom/top + margin

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    display: inline;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    background: yellow;
    margin: auto;
    height: 100px;
    width: 100px;
}
</style>

四、flex布局

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.children-box {
    background: yellow;
    height: 100px;
    width: 100px;
}
</style>

五、grid布局

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    width: 100px;
    height: 100px;
    background: yellow;
    margin: auto;
}
</style>

六、table-cell + vertical-align + inline-block/margin: auto

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.children-box {
    width: 100px;
    height: 100px;
    background: yellow;
    display: inline-block;// 可以换成margin: auto;
}
</style>

2、不定宽高

一、绝对定位 + transform

<template>
    <div id="app">
        <div class="box">
            <div class="children-box">111111</div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
   position: absolute;
   background: yellow;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
</style>

二、table-cell

<template>
    <div id="app">
        <div class="box">
            <div class="children-box">111111</div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.children-box {
   background: yellow;
   display: inline-block;
}
</style>

三、flex布局

<template>
    <div id="app">
        <div class="box">
            <div class="children-box">11111111</div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.children-box {
    background: yellow;
}
</style>

四、flex变异布局

<template>
    <div id="app">
        <div class="box">
            <div class="children-box">11111111</div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
}
.children-box {
    background: yellow;
    margin: auto;
}
</style>

五、grid + flex布局

<template>
    <div id="app">
        <div class="box">
            <div class="children-box">11111111</div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    background: yellow;
    align-self: center;
    justify-self: center;
}
</style>

六、gird + margin布局

<template>
    <div id="app">
        <div class="box">
            <div class="children-box">11111111</div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: grid;
}
.children-box {
    background: yellow;
    margin: auto;
}
</style>

七、writing-mode属性布局

<template>
    <div id="app">
        <div class="box">
            <div class="children-box">
                <p>11111</p>
            </div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    writing-mode: vertical-lr;
    text-align: center;
}

.box>.children-box {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}

.box>.children-box>p {
    display: inline-block;
    margin: auto;
    text-align: left;
    background: yellow;
}
</style>

3、番外(图片定高|不定高水平垂直居中)

一、table-cell

<template>
    <div id="app">
        <div class="box">
            <img src="https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/242dd42a2834349b406751a3ceea15ce36d3beb6.jpg">
        </div>
        </div>
</template>
<style type="text/css">
.box {
     height: 200px;
    width: 200px;
    display: table-cell;
    text-align: center;
    border: 1px solid #ccc;
    vertical-align: middle;
}
</style>

二、 ::after

<template>
    <div id="app">
        <div class="box">
            <img src="https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/242dd42a2834349b406751a3ceea15ce36d3beb6.jpg">
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    text-align: center;
}

.box::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
img {
    vertical-align: middle;
}
</style>

三、 ::before

<template>
    <div id="app">
        <div class="box">
            <img src="https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/242dd42a2834349b406751a3ceea15ce36d3beb6.jpg">
        </div>
        </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;

    text-align: center;
    font-size: 0;
}

.box::before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    height: 100%;
}

img {
    vertical-align: middle;
}
</style>

最后

水平居中

行内元素可设置：text-align: center;
flex布局设置父元素：display: flex; justify-content: center;

垂直居中

单行文本父元素确认高度：height === line-height
多行文本父元素确认高度：disaply: table-cell; vertical-align: middle;

二、块级元素居中布局

水平居中

定宽: margin: 0 auto;
不定宽： 参考上诉例子中不定宽高例子。

垂直居中

position: absolute设置left、top、margin-left、margin-to(定高)；
position: fixed设置margin: auto(定高)；
display: table-cell；
transform: translate(x, y)；
flex(不定高，不定宽)；
grid(不定高，不定宽)，兼容性相对比较差；

smart_one
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现水平垂直居中总结.html
06-28
关于元素的水平/垂直居中的方案有很多，包括知道元素宽/高和不知道元素宽/高的情况。该html文档总结了几个我知道的较为常用的实现方法。
c#压缩图片宽高和DPI
05-05
用c#语言开发，选择要压缩的图片路径，选择要保存压缩图片的路径，可以压缩宽高，比如原来是1500*1500，填写压缩5倍，那么就压缩成300*300了，还可以压缩DPI,分辨率保持不变，比如图片原大小由500kb，可以压缩到300...
总结一些垂直居中的方法
m0_62883848的博客
05-25 469
1.使用table标签：使用table自带的居中效果 2.将div变成table标签：如果必须使用div，就把div变成table来使用 3.使用绝对定位与负margin：灵活使用负margin，数值为元素宽度/高度的一半 4.使用绝对定位与transform：与上同理 5.使用margin：auto 6.使用flex ...
关于常用的垂直居中
淮枳
10-17 402
最近做页面经常用到垂直居中，而且有些是不定高，在这里总结一下垂直居中用到的技巧。   对于盒子垂直居中：     第一种方法：先让盒子top和left的位置移动50%（要先设置position），然后利用margin的负值将盒子拉到中间。     第二种方法：flex布局，使用align-items垂直居中，缺点是在pc兼容性不太好。（也可以使用Grid布局，但我很少用）     第三种...
SAP SMARTFORMS 开发，几个常用到的知识点，假脱机连打，页格式，条形码设置等
SAP自学之路
08-03 3047
T-CODE: SMARTFORMS：smartforms设计，样式设计以及文本模块 SE78：维护图片 SE73：SAPscript维护，打印机字体，条形码等 SPAD：假脱机管理，打印机设置 一、Syntax说明 &field+<offset>& 对于字符变量设置从何位置显示数据,如果offset大于字符变量长度时,系统就不会显示任何数据 &field(&lt...
未知宽高元素水平垂直居中对齐的四种方式 | 定位 | flex布局 | grid布局 | table-cell
dxy1128的博客
11-03 1320
使用一个父盒子包含一个宽高随意的子元素，使子元素在父元素内水平垂直居中。
[转]文字垂直居中
<Glad to meet you />
08-21 332
“文字垂直居中”这个算是老话题,网上也有很多解决方式,我这里就介绍一种较为简单的实现方法. 具体来说应该有两种情况: 1.单行文字     这种情况比较好处理,直接设置与height相等的line-height就OK,或者使用padding. 2.多行文字在已知高度的容器里垂直居中     曾经用table布局的时候要达到这个效果非常容易,但现在就需要费点心思:     对
根据已知高和宽绝对垂直居中div示例代码
12-10
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...已知宽高度DIV垂直水平居</title> <style type=”text/
实现DIV层内的文字垂直居中(单行文字/多行文字)
09-25
如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了；如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现；这里建议使用table方法
如何实现不定宽高的div水平垂直居中
zhou_ya_nan的博客
11-26 1493
如何实现不定宽高的div水平垂直居中 第一个方法：我们使用定位给父元素positon：relative，定位到中间 div{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 注释：子绝父相（子元素绝对定位，父元素相对定位） 第二个方法：通过flex布局 div { display: flex; justify-content:center; //子元素水平居中（主轴） align-items:center
SAP Smart forms中文字体重叠的解决方法
05-24
SAP Smart forms中文字体重叠的解决方法
安卓smartTable的使用源码
09-30
安卓smartTable的使用源码。展示表格数据、选择表格数据、点击事件的实现等。
SAP SMARTFORMS/如何在Smartforms中设置左右对齐
Violinlins
08-06 2518
SAP smartforms的使用前面的也写了一些。但是都是比较笼统的理解，讲解的也不够详细深入。这里再做一些补充，说一下详细制作form的方法。 　　1.首先，对于要创建smartform实现数据打印的程序来说，第一就是对打印格式的梳理。需要用到哪些段落格式，左对齐、右对齐还是居中，还需要用到哪些字体。这是准备工作。 　　输入事务码smartforms,进行打印格式的创建界面。首先完成格式的创建。选择第二项，样式，输入要创建的样式的名字，点击创建。此处以样式ztest举例。如图所示： ...
如何实现一个未知宽高元素的水平垂直居中？
u014636613的博客
03-03 2598
以下是实现未知宽高元素水平垂直居中的三个方法： 方法1：通过定位和transform属性来实现 html: 实现未知宽高元素垂直居中的方法1：通过定位和transform来实现 css: &lt;style&gt; .parent{ width:100%; height:400px; background:#666; ...
设置未知宽高元素水平垂直都居中的几种方法
qq_59541478的博客
09-01 1812
设置盒子或者元素水平垂直居中是在面试中有可能遇到的问题，本文介绍了几种设置方法
元素不定宽高的情况下水平垂直居中的方法有哪些？
weixin_46886227的博客
03-27 1461
实现方式 定位 + margin:auto 定位 + margin: 负值 定位 + transform table布局 flex布局 grid网格布局 定位+margin:auto <style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative;.
SMARTFORMS遇到的几个问题总结
weixin_30322405的博客
05-18 716
1.使用SFSY-FORMPAGES显示总页数的时候，如果页数大于9，将会在前10页显示成星号*。 有时候这样做完之后，星号*是没有了，但是字体会有颠倒或者重叠的现象。 如果出了这个问题，最好把显示页码的文本放到一个单独的窗口，并且把这个窗口类型设置为L:最终窗口 这样，即便不加3ZC，问题也能解决了 这里的3zc好像打印最多999页。如果要打印超过999页，可以设置为4ZC。 2....
Smartforms 表格中动态文本字体设置问题
ABAPxiaobai的博客
01-10 1222
如下图所示，表格中有一个动态文本： 修改后客户反馈文本位置一直居中： 通过查询发现没有设置文本的显示格式，最终通过排查发现，原来实在smartforms的style中设置： 在表头数据中设置的样式才会影响到动态文本的样式。 ...
smartforms输出格式设置说明
少年休闲海
01-15 6255
Syntax                 说明  &field+&               对于字符变量设置从何位置显示数据,如果offset大于字符变量长度时,系统就不会显示任何数据  &field()&               设置输出长度.  &field(*)&              如果该字段类型是abap数据字典里定义的类型,系统将按照字典定义的长度设置输出长度 
jsp input设置宽高和居中
最新发布
06-07
要设置一个输入框（input）的宽高和居中，可以使用以下的代码： ```html input { width: 200px; /* 设置宽度为200像素 */ height: 30px; /* 设置高度为30像素 */ display: block; /* 将输入框转换为块级元素 *...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值