css实现水平垂直居中的4种方法

hearaway 发布于2019-08-29 18:32 / 1890人阅读

摘要：结构已知元素的宽度和高度设置为自身高度的一半这个方法可以实现自适应未知元素的高度和宽度使用的来实现注意这里需要设置高度来查看垂直居中效果

html结构：

1. 已知元素的宽度和高度：

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */
    margin-left: -75px;
}

.item {
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

/* 这个方法可以实现自适应 */

2. 未知元素的高度和宽度：

.item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
}

.parent {
    display: flex;
    justify-content:center;
    align-items: center;
    background: #AAA;
    height: 300px;   /* 注意这里需要设置高度来查看垂直居中效果 */
}

私有云海外云主机水平垂直居中实现垂直居中 html的水平居中三种实现方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114396.html

CSS垂直居中，你会多少种写法？

摘要：如果我们直接可以计算出正确的和值，岂不是一次到位函数正有此功能，当然我们需要知道子元素的宽高效果是一个作用于内联元素的属性。内联元素的特性是会和其它内联元素或者文字在同一行显示，但是默认情况下是与父元素基线对齐的。 CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于H...

caohaoyu 2019-08-29 18:43 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Scholer 2019-08-02 16:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

mayaohua 2019-08-29 18:44 评论0 收藏0
16种水平居中垂直居中方法

摘要：原文链接水平居中若是行内元素给其父元素设置即可实现行内元素水平居中若是块级元素该元素设置即可若子元素包含属性为了让子元素水平居中则可让父元素宽度设置为并且配合作如下设置是中给属性新加的一个属性值它配合可以轻松实现水平居中原文链接水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin...

jerry 2019-08-30 15:54 评论0 收藏0
CSS实现水平垂直居中的1010种方式（史上最全）

摘要：划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个仓库，欢迎大家仅居中元素定宽高适划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 showImg(https://segmentfault.com/im...

YuboonaZhang 2019-08-29 16:45 评论0 收藏0