html中页面整体居中,css实现网页内容整体居中的三种方法总结

下面我们来看一款利用css实现div中内容居中的方法，下面整理了三种css实现网页内容整体居中方法，希望对各位朋友会有所帮助。

例代码如下复制代码

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

内容居中

.box{ width:600px; height:100px; border:1px solid #000; vertical-align:middle; display:table-cell;}

无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档

测试文件index.html的代码其中外部的style.css文件地址请自己更换代码如下复制代码

方法一(style.css)：代码如下复制代码

*{margin:0;padding:0;} /*顶部对齐*/

#wrap

{

position:relative;

width:988px;

margin-left:50%;

left:-494px;

height:1200px;

border:solid 1px red;

}

评论：此方法是先定好内容的宽度，然后向左距离整个浏览器的50%，再向左拉回内容宽度的一半

方法二(style1.css)：代码如下复制代码

*{margin:0;padding:0;}

body{text-align:center;}

#wrap

{

position:relative;

margin:0 auto;

width:988px;

height:1200px;

text-align:left;

border:solid 1px red;

}

评论：此方法是先定好内容的宽度，然后body里面内容居中，然后容器里面内容靠左，注意 margin:0 auto;是为了兼容其他浏览器

方法三(style2.css)：代码如下复制代码

*{margin:0;padding:0;}

#wrap

{

position:relative;

width:988px;

margin-left:-494px;

left:50%;

height:100%;

border:solid 1px red;

}

评论：和方法一类似，可以对比方法一看

html中页面整体居中,css实现网页内容整体居中的三种方法总结相关推荐

html按钮disabled状态,CSS定义input disabled样式的三种方法
表单提交的时候我们经常会让提交按钮禁用,满足条件后按钮恢复,disabled禁用按钮后怎么用CSS来改变禁用disabled按钮的样式呢?下面看青岛星网:CSS定义input disabled样式的三 ...
android sdk与adt版本,eclipse中sdk与adt版本不兼容该怎么解决? 三种方法帮你搞定
安卓开发过程中经常遇到sdk版本adt版本不相符,sdk版本过高的问题,这篇经验帮助你解决这个问题,如果是adt版本过高,请升级sdk,如果出现的错误如下图所示表示sdk版本过高,下面介绍三种方法软 ...
html整体垂直居中,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方法教程,遵循代码与文章教程懂得驾驭并加以应用. 一.使用flex完成垂直居中操作css flex实现垂直居中.flex兴许不是实现垂直居中最好的抉择,因为IE ...
css水平垂直居中(不定高)的三种方法
<style>.parent{ height:200px;width:200px;border:1px solid #000;}.son{width:100px;background: r ...
查找字符串中出现字符最多次数和出现的字符（三种方法）
第一种 var str = "abcccwwwasdasfqwweqewqeqwnn"var arr = str.split("")var Arr = arr. ...
CSS实现导航条Tab切换的三种方法
前面的话导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法布局根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布局效 ...
html清除图片上下间距,css - 三种方法解决LI和内部Img的上下间距问题
在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...
Altium designer 在原理图及PCB中高亮某一条网络的三种方法
1. alt 键+鼠标左键 2. 利用原理图界面右下角的"笔"一样的工具 3 .Navigator(在原理图界面右下角,Designe Compiler 选项中),选择如图所示的n ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...

html中页面整体居中,css实现网页内容整体居中的三种方法总结

html中页面整体居中,css实现网页内容整体居中的三种方法总结相关推荐

最新文章

热门文章