您的位置：首页 > Web前端 > HTML

Html div上下左右居中显示

2017-05-09 10:53 267 查看

实现div上下，左右居中显示，，，当是固定高度时候，很好办，，这里展示的是宽度是整个屏幕时候居中显示

源码展示：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>relative样式</title>

<style type="text/css">

.class{



}

#div1{

    width:100%;

    height:400px;

   border:1px red solid;

   box-sizing:border-box;

   background-image:url("http://pic6.huitu.com/res/20130116/84481_20130116142820494200_1.jpg");

   text-align:center;

   line-height:400px;

   color:blue;

}

</style>

</head>

<body>

   <div id="div1">测试的文字</div>

</body>

</html>

效果图：

中间红色圈出来的是显示的居中文字，div的上下左右，居中效果，可以不用去理会。。。

通过上面的代码就实现了，div上下，左右居中显示的效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML div居中 div上下左右居中显示

相关文章推荐

新的分享

章节导航