css实现元素水平、垂直居中

2020-12-13 01:52

阅读：508

标签：style blog class code java ext

一、水平居中

　　1、行内元素的水平居中方法

　　　　给父元素设置一个text-align:centent。　　　　

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
style>
    .box{
        text-align: center;
    }
style>
body>
div class="box">div>
body>
html>

　　2、确定宽度的块级元素水平居中　　

　　　　设置外边距，margin：0 auto;　　

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
style>
    .box{
        width: 400px;
        height: 400px;
        background: red;
        margin: 0 auto;
    }
style>
body>
div class="box"> div>
body>
html>

　　3、负外边距

　　　　创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。然后，将容器的左外边距值设置为负的容器宽度的一半。这　　　　样即可将该容器固定在页面水平方向的中点。

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
style>
    .box{
        width:400px;
        height:400px;
        background:red;
        position:absolute;
        left:50%;
        margin-left:-200px;
    }
style>
body>
div class="box">
div>
body>
html>

二、垂直居中

　　1、使用line-height　　　　

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
    style>
        .box{
            background: red;
            line-height: 50px;
        }
    style>
body>
    div class="box">Text herediv>
body>
html>

　　2、margin

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
    style>
        .box{
            background: red;
            width: 400px;
            height:400px;
        }
        .logo{
            width: 200px;
            height: 200px;
            margin-top: 100px;
        }
    style>
body>
    div class="box">
        img class="logo" src="images/logo.jpg" alt=""/>
    div>
body>
html>

　　3、vertical-align

DOCTYPE html>
html>
head lang="en">
meta charset="UTF-8">
title>title>
head>
style>
.box{
display:table;
}
.div {
display:table-cell;
vertical-align:middle;
background: red ;height: 100px
}
style>
body>
div class="box">
div class="div">
p> vertical-align p>
div>
div>
body>
html>

　　4、position:absolute;

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
    style>
        .box{
            width: 400px;
            height: 400px;
            background: red;
            position: relative;
        }
        .div{
            position:absolute;
            top:50%;
            width: 200px;
            height:200px;
            margin-top:-100px;
            background: green;
        }
    style>
body>
    div class="box">
       div class="div">div>
    div>
body>
html>

　　5.position:absolute

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
style>
    .box{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
        height:240px;
        width:70%;
        background: red;
    }
style>
body>
    div class="box">div>
body>
html>

　　6、在 content 元素外插入一个 div

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
style>
    .box{
        height:50%;
        float:left;
        background: red;
        margin-bottom:-100px;
    }
    .div {
        clear:both;
        width: 200px;
        height:200px;
        background: green;
        position:relative;
    }
style>
body>
div class="box">div>
div class="div">div>
body>
html>

　　7、padding

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
style>
    .box{
        padding: 20px;
        background: red;
    }
style>
body>
div class="box"> padding div>
body>
html>

css实现元素水平、垂直居中,搜素材,soscw.com

css实现元素水平、垂直居中

标签：style blog class code java ext

原文地址：http://www.cnblogs.com/lybk/p/3712644.html

上一篇：在Windows下用MingW 4.5.2编译FFmpeg

下一篇：C++11消息队列 + Qt线程池 + QRunnable执行任务简单模型

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：css实现元素水平、垂直居中
文章链接：http://soscw.com/essay/24354.html

亲，登录后才可以留言！

css实现元素水平、垂直居中

评论

热门文章

推荐文章

最新文章

置顶文章