Question

我希望div #container位于页面的中心。像水平和垂直。我试图制作<context:annotation-config /> <context:component-scan base-package="com.someapp" /> <tx:annotation-driven /> <bean class="org.springframework.dao.annotation.PersistenceExceptionTranslationPostProcessor" /> <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="oracle.jdbc.driver.OracleDriver" /> <property name="url" value="jdbc:oracle:thin:@172.28.12.31:1521:fsdev" /> <property name="username" value="cybercodesqat" /> <property name="password" value="welcome123" /> </bean> <bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean" p:dataSource-ref="dataSource" p:persistenceUnitName="MonitorJpaPersistenceUnit" /> <bean class="org.springframework.orm.jpa.support.PersistenceAnnotationBeanPostProcessor" /> <bean id="transactionManager" class="org.springframework.orm.jpa.JpaTransactionManager" p:entityManagerFactory-ref="entityManagerFactory" /> <tx:annotation-driven transaction-manager="transactionManager" />但它没有用。无论显示器的大小如何，它都必须像在页面的中心。先感谢您！

继承我的代码：

position: absolute; top: 50%; bottom: 50%; left: 50%; right: 50%

@import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i');
 #container {
  width: 30em;
  background-color: #eee;
  height: 30em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}
#wrapper {
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
}

Answer 1

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

<div class="centered">This div is centered</div>

注意：现在浏览器非常支持转换，请参阅http://caniuse.com/#search=transform

如何在页面中心创建<div>？

1 个答案: