Question

昨天我发布了一个问题，询问如何将div放在div中...现在我有另一个问题，我想在屏幕上居中一个div。我希望它在中间并占据屏幕的50％; 这是问题的图片： enter image description here

正如您所看到的，屏幕中间没有任何内容，这就是我的问题。这是我的HTML代码：

  * {
    	font-size: 100%;
    	font-family: Serif;
    }
    
    body {
    	background: url("images/background.jpg") repeat;
    	font-size: 100%;
    }
    
    .items {
    	background-color: rgba(0,0,0,.5);
    	width: 100%;
    	text-align: center;
    	margin: 0;
    	
    }
    #basicInfo{
    	background-color: rgba(255,150,0,.8);
    	width: 100px;
    	height: 100px;
    	display: inline-block;
    	margin-top: 10px;
    	margin-bottom: 10px;
    }
    #basicInfo:hover{
    	background-color: rgba(255,150,0,1);
    }
    #basicInfo img{
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	padding-top: 16px;
    }
    #langs{
    	background-color: rgba(255,150,0,.8);
    	width: 100px;
    	height: 100px;
    	display: inline-block;
    	margin-top: 10px;
    	margin-bottom: 10px;
    }
    #langs img{
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    	padding-top: 16px;
    }
    #langs:hover{
    	background-color: rgba(255,150,0,1);
    }
    .navbar {
    	background-color: rgba(0,0,0,0.1);
    	position: fixed;
    	bottom: 0px;
    	left: 0px;
    	right: 0px;
    	width: 100%;
    	min-height: 5%;
    }
    .button{
    	background-color: rgba(0,0,0,.5);
    	font-size: 2em;
    	color: white;
    	width: 33%;
    	margin: 0 .16%;
    	height: 100%;
    	float: left;
    }
    .button:hover{
    	background-color: rgba(0,0,0,.7);
    }
    .button a{
    	text-decoration: none;
    	display: block;
    	color: white;
    	text-align: center;
    	vertical-align: middle;
    }
    #textSpace {
    	background-color: rgba(0,0,0, .5);
    	width: 100%;
    	height: 50%;
    	display: block;
    	top: auto;
    	bottom: auto;
    
    }

<title>Mateo's About Page</title>
    </head>
    <body>
    	<div class="items">
    		<div id="basicInfo">
    			<img src="images/question.png">
    		</div>
    		<div id="langs">
    			<img src="images/code.jpg">
    		</div>
    	</div>
    	<div id="textSpace">
    		
    	</div>
      		<div class="navbar">
      			<div class="button">
      				<a href=""><b>Mateo</b></a>
      			</div>
      			<div class="button">
      				<a href=""><b>Home</b></a>
      			</div>
      			<div class="button">
      				<a href=""><b>Josh</b></a>
      			</div>
      		</div>

任何帮助都是帮助！提前致谢！

Answer 1

要在屏幕中间水平居中div，请使用：

margin-left:auto;
margin-right:auto;

由于其他div，无法使DIV居中

1 个答案: