我希望这是关于将对象居中到屏幕的确切中心。
使用 transform: translate(-50%,-50%) 会发生模糊。
因此,不要这样做:
position: absolute;
margin:0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
我尝试使用JavaScript(React.js)向元素注入样式。
const node = ReactDOM.findDOMNode(this);
var width = node.offsetWidth;
var height = node.offsetHeight;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
style={
left : (windowWidth/2) - (this.state.width/2) + 'px',
right: (windowWidth/2) - (this.state.width/2) + 'px',
top: (windowHeight/2) - (this.state.height/2) + 'px',
bottom: (windowHeight/2) - (this.state.height/2) + 'px'
}
使用JavaScript向元素注入样式:
例如:
export default class Dialog extends React.Component {
constructor(props) {
super(props);
this.state = {
width: '0px',
height: '0px'
};
}
setWidthhandHeight(node){
if (this.state.width !== node.offsetWidth) {
this.setState({
width: node.offsetWidth,
height: node.offsetHeight
});
}
}
componentDidMount() {
this.setWidthhandHeight(node);
}
render() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
return (
<dialog className={this.props.className + " dialog"}
style={{
left : (windowWidth/2) - (this.state.width/2) + 'px',
right: (windowWidth/2) - (this.state.width/2) + 'px',
top: (windowHeight/2) - (this.state.height/2) + 'px',
bottom: (windowHeight/2) - (this.state.height/2) + 'px'
}}>
{this.props.title ? (
<header><span>{this.props.title}</span></header>
)
: null
}
{this.props.children}
</dialog>
);
}
}