html的几种水平垂直居中的方式（基础）

Songlcy 发布于2019-08-30 15:44 / 3438人阅读

摘要：前言我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。

前言
我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。

第一种方法





    d第一种



   .Centered1{
            background-color: #800070;
            width: 100%;
            height:500px;
            position: relative;
        }
    .Centered1 p{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            line-height: 200px;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: 0;
            right:0;
            top: 0;
            margin: auto;
        }

第二种方法





    d第二种



/*第二种方法水平垂直居中*/
    .Centered2{
            background-color: #ef8518;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered2 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:red;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top:50%;
            margin-left:-100px;
            margin-top: -100px;
        }

第三种方法





    d第三种



/*第三种方法水平垂直居中*/
    .Centered3{
            background-color: dimgrey;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered3 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:darkorange;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
        }

第四种方法





    d第四种



/*第四种方法水平垂直居中,老版本flex布局*/
    .Centered4{
            background-color: #FF4444;
            width: 100%;
            height: 500px;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: center;
        }
    .Centered4 p {
            width: 200px;
            height: 200px;
            background-color:cadetblue;
            line-height: 200px;
            text-align: center;
        }

第五种方法





    d第五种



/*第五种方法水平垂直居中,新版本的flex水平垂直居中*/
    .Centered5{
            background-color: darkslateblue;
            width: 100%;
            height: 500px;
            display: flex;
            justify-content:center;
            align-items: center;
        }
    .Centered5 p {
            width: 200px;
            height: 200px;
            background-color:fuchsia;
            line-height: 200px;
            text-align: center;
        }

专线服务 idc机房托管 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式水平垂直居中

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

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

使一个div垂直+水平居中的几种方法

摘要：前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这个问题思路绝对定位居中原始版这个是我回答出来的，也是被各位所熟知的一种方法，设外层相对定位，内前几天去一家互联网公司面试，面试官问到了这个应该算是比较简单的问题，在我自认为回答正确时，才知道这道题的答案有很多种，下面就让我们一起来探讨一下这...

joyqi 2019-08-29 11:04 评论0 收藏0
前端培训-初级阶段（13、18）

摘要：年月欧洲计算机制造商协会发表了标准，它是的一个扩延，它也被称为年月首版年月日截止发布日期，的官方名称是，国际意在更频繁地发布包含小规模增量更新的新版本，下一版本将于年发布，命名为。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的...

YorkChen 2019-08-23 16:22 评论0 收藏0
(面试题)垂直居中的几种实现方式

摘要：尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例一个的在一个水平垂直居中，用实现。首先定义元素层和垂直居中无关的样式直接定义在里。相比较水平居中，垂直居中比较复杂点。尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例：一个200*2...

cheukyin 2019-08-30 11:18 评论0 收藏0
CSS垂直居中，你会多少种写法？

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

caohaoyu 2019-08-29 18:43 评论0 收藏0
web开发常用的几种居中形式

摘要：一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素有属性给元素添加代码演示此外，和产生同样效果的原因移步要居中的元素没有属性给添加属性，并在的外面包一层且添加是让块状里面的元素比如文字居中。一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素A有width属性给元素A添加 margin：0,auto；(代码演示) showImg(h...

zqhxuyuan 2019-08-21 16:23 评论0 收藏0